×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: Javascript
Posted by: Mirko Jelic
Added: Feb 9, 2019 10:51 AM
Modified: Feb 9, 2019 11:00 AM
Views: 3720
Tags: react
  1. import React from 'react'
  2. import classNames from 'classnames'
  3.  
  4. const TextFieldGroup = (
  5.   {
  6.     name,
  7.     placeholder,
  8.     value,
  9.     label,
  10.     error,
  11.     info,
  12.     type = 'text',
  13.     onChange,
  14.     disabled
  15.   }
  16.  
  17. ) => {
  18.  
  19.   return (
  20.     <div className='form-control'>
  21.       {error && <div className="form-control__invalid--feedback">{error}</div>}
  22.       <label htmlFor={name} className="form-control__label">{label}</label>
  23.       <input
  24.         type={type}
  25.         className={classNames('form-control__input',{'form-control__input-invalid':error})}
  26.         placeholder={placeholder}
  27.         name={name}
  28.         value={value}
  29.         onChange={onChange}
  30.         disabled={disabled}
  31.       />
  32.       {info && <small className="form__info">{info}</small>}
  33.  
  34.     </div>
  35.   )
  36. }
  37.  
  38. export default TextFieldGroup
  39.