const AuthForm = ({ buttonText, formType, onAuth, history, ...props }) => {

  const submitData = () => {
    onAuth(formType, values, history);
  }

  const {
    values,
    errors,
    handleChange,
    handleSubmit,
  } = useForm(submitData, validate);

return (
    <Form onSubmit={handleSubmit}>
      <FlexContainer flexDirection="column" justify="space-between" >
        <FlexContainer flexDirection="column" >
          <TextInput
            id="email"
            name="email"
            onChange={handleChange}
            value={values.email || ''}
            placeholder="Email"
            onFocus={(e) => e.target.placeholder = ""}
            onBlur={(e) => e.target.placeholder = "Email"}
          />
          {errors.email && <ErrorMessage>{errors.email}</ErrorMessage>}
          <TextInput
            id="password"
            name="password"
            onChange={handleChange}
            type="password"
            value={values.password || ''}
            placeholder="Password"
            onFocus={(e) => e.target.placeholder = ""}
            onBlur={(e) => e.target.placeholder = "Password"}
          />
          {errors.password && <ErrorMessage>{errors.password}</ErrorMessage>}
        </FlexContainer>
        <FlexContainer flexDirection='column' >
          <Button type="submit" buttonText={buttonText} buttonSize="large"/>
        </FlexContainer>
      </FlexContainer>
    </Form>
  )
};
...
function validate(values) {
  let errors = {};
  if (!values.email) {
    errors.email = 'Email address is required';
  } else if (!/^([a-zA-Z0-9_-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([a-zA-Z0-9-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$/.test(values.email)) {
    errors.email = 'Email address is invalid';
  }
  if (!values.password) {
    errors.password = 'Password is required';
  } else if (values.password.length < 8) {
    errors.password = 'Password must be 8 or more characters';
  }
  return errors;
};

export default AuthForm;

const useForm = (callback, validate) => {

  const [values, setValues] = useState({});
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  useEffect(() => {
    if (Object.keys(errors).length === 0 && isSubmitting) {
      callback();
    }
    else if (isSubmitting) {
      setValues({});
    }
  }, [errors]);

  const handleSubmit = (e) => {
    e.preventDefault();
    setErrors(validate(values));
    setIsSubmitting(true);
  };

  const handleChange = (event) => {
    event.persist();
    setValues(values => ({ ...values, [event.target.name]: event.target.value }));
  };

  return {
    handleChange,
    handleSubmit,
    values,
    errors,
  }
};

export default useForm;