Form.js

import React, { useCallback, useState } from 'react';

const FormContext = React.createContext({
  getInputValue: (name, defaultValue = '') => null,
  onInputChange: name => e => {}
});

function validate(data, rules) {
  // validate here
}

function Form(props) {
  const formState = useState({ data: {} });
  const onSubmit = useCallback(
    event => {
      event.preventDefault();

      validate(formState, props.rules) && props.onSubmit(formState);
    },
    [formState, props.rules]
  );

  function getInputValue(name, defaultValue = '') {
    return this.state.data[name] || defaultValue;
  }

  function onInputChange(name) {
    return function(e) {
      const targetValue = e.target.value;
      this.setState(prevState => ({
        data: {
          ...prevState.data,
          [name]: targetValue
        }
      }));
    };
  }

  return (
    <FormContext.Provider value={{ getInputValue, onInputChange }}>
      <form action="" onSubmit={onSubmit}>
        {props.children}
      </form>
    </FormContext.Provider>
  );
}

export default Form;