Input Prerequisites

react-form-base provides a Form base class which expects to work together with Input Components. An Input Component is any component that consumes three properties: value, error and onChange. It also has to provide it's value as first argument to onChange function supplied in props. The most strait-forward Input component may look like so:

function TextField(props) {
  const { value, error, onChange, ...rest } = props;

  return (
    <div>
      <input value={value} onChange={(e) => onChange(e.target.value)} {...rest} />
      {error &&
        <div className="error">{error}</div>
      }
    </div>
  );
}

TextField.propTypes = {
  value: PropTypes.string,
  error: PropTypes.string,
  onChange: PropTypes.func
};