useForm

React, Hooks, State

Creates a stateful value from the fields in a form.

  • Use the useState() hook to create a state variable for the values in the form.
  • Create a function that will be called with an appropriate event by a form field and update the state variable accordingly.
const useForm = initialValues => {
  const [values, setValues] = React.useState(initialValues);

  return [
    values,
    e => {
      setValues({
        ...values,
        [e.target.name]: e.target.value
      });
    }
  ];
};
const Form = () => {
  const initialState = { email: '', password: '' };
  const [values, setValues] = useForm(initialState);

  const handleSubmit = e => {
    e.preventDefault();
    console.log(values);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" onChange={setValues} />
      <input type="password" name="password" onChange={setValues} />
      <button type="submit">Submit</button>
    </form>
  );
};

ReactDOM.render(<Form />, document.getElementById('root'));

Recommended snippets

  • useLocalStorage

    React, Hooks

    Creates a stateful value that is persisted to localStorage, and a function to update it.

  • useSessionStorage

    React, Hooks

    Creates a stateful value that is persisted to sessionStorage, and a function to update it.

  • useMergeState

    React, Hooks

    Creates a stateful value, and a function to update it by merging the new state provided.