Simple react form using hooks

example-react-form-hook.js

import React from 'react';
import { useRef } from 'react';


export default function AddMemberPage({ addMember }) {
  const formRef = useRef();

  async function handleSave(event) {
    event.preventDefault();

    const data = formRef.current.getData();
    await addMember({ variables: {...data} });
    alert('Success!');
    formRef.current.reset();
  }

  return (
    <Form ref={formRef}>
      <Form.Input name="name" label="Name"/>
      <Form.Input name="email" type="email" label="Email"/>
      <button onClick={handleSave}>Save</button>
    </Form>
  );
}

form.js

import React from 'react';
import { forwardRef } from 'react';
import { useRef } from 'react';
import { useImperativeMethods } from 'react';


const Form = forwardRef(FormRef);

function FormRef({ children }, ref) {
  const formRef = useRef();

  useImperativeMethods(ref, () => ({
    getData() {
      const data = new FormData(formRef.current);
      return Array.from(data.entries()).reduce((acc, [key, value]) => {
        acc[key] = value;
        return acc;
      }, {});
    },

    reset() {
      formRef.current.reset();
    }
  }));

  return (
    <form className="form" ref={formRef}>
      {children}
    </form>
  );
}


Form.Input = function Input({ type = 'text', label, defaultValue, ...props }) {
  return (
    <div className="input">
      <label>
        {label}
      </label>
      <input
        {...props}
        type={type}
        defaultValue={defaultValue}/>
    </div>
  );
}

export default Form;