react-hooks-forms-1.jsx

import React, { useState } from 'React';

export function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = event => {
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <fieldset>
        <div>
          <label htmlFor='formName'>Name:</label>
          <input
            id='formName'
            name='name'
            type='text'
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor='formEmail'>Email:</label>
          <input
            id='formEmail'
            name='email'
            type='text'
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
      </fieldset>
      <button type='submit'>Submit</button>
    </form>
  );
}

react-hooks-forms-2.jsx

import React, { useState } from 'React';

const FORM_DEFAULT = {
  name: '',
  email: ''
};

export function Form() {
  const [form, setForm] = useState(FORM_DEFAULT);

  const handleForm = event => {
    form[event.target.name] = event.target.value;
    setForm(form);
  };

  const handleSubmit = event => {
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <fieldset>
        <div>
          <label htmlFor='formName'>Name:</label>
          <input
            id='formName'
            name='name'
            type='text'
            value={form.name}
            onChange={handleForm}
          />
        </div>
        <div>
          <label htmlFor='formEmail'>Email:</label>
          <input
            id='formEmail'
            name='email'
            type='text'
            value={form.email}
            onChange={handleForm}
          />
        </div>
      </fieldset>
      <button type='submit'>Submit</button>
    </form>
  );
}