This is a Input field to reuse.

InputField.js

// InputField.js

const onHandleChange = (validate, onChange) => event => {
    const { value } = event.target;    
    const isValid = validate(value);

    onChange(value, isValid);
}

const getStyle = isValid => ({
  border: isValid ? '' : '1px solid red',
});

export const InputField = ({ 
  value,
  name,
  type,
  isValid,
  validate,
  onChange,
}) => (
  <div>
    <input 
      styles={getStyle(isValid)}
      type={type} 
      name={name} 
      value={value}
      onChange={onHandleChange(validate, onChange)} 
      />
  </div>
);