High Order Component

Field.js

// Field.js 
import React from 'react';

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 Field = ({ 
  component: Component, // <-- receice the component to render
  validate,
  isValid,
  onChange,
  ...props, // <-- receive the name, value, type, options and etc...
}) => (
  <div>
    <Component  
      style={getStyle(isValid)}
      onChange={onHandleChange(validate, onChange)}
      {...props}
    />
  </div>
);