ReactForm.js

import React, { useCallback, useContext, useState } from 'react';
import { connect } from 'react-redux';

import { updateSomeAPIValue } from 'state/APIValue';

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

function Input(props) {
  const context = useContext(FormContext);

  return (
    <input
      {...props}
      onChange={context.inputChange(props.name)}
      value={context.getInputValue(props.name)}
    />
  );
}

Input.defaultProps = {
  type: 'text'
};

/* Form Component
========================================================================== */
function validate(data, rules) {
  // validate here
}

function Form(props) {
  const formState = useState({ input1: '', input2: '' });
  const onSubmit = useCallback(
    event => {
      event.preventDefault();

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

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

/* Custom Component
========================================================================== */
export function MyForm(props) {
  const onFormSubmit = fields => {
    // Dispatch action provided by mapDispatchToProps
    props.updateSomeAPIValue(fields);
  };

  return <Form onSubmit={}></Form>;
}

const mapDispatchToProps = () => {
  return {
    updateSomeAPIValue
  };
};

const mapStateToProps = state => {
  return {};
};

export default connect(mapStateToProps, mapDispatchToProps)(MyForm);