How to handle forms in React, the easy way to do it

2 min readJun 30, 2023

When I first started using React, I learned how to manage forms. I learn about the CONTROLLED REACT FORM and UNCONTROLLED REACT FORM way of learning form handling in react. Use onChange handlers, and handle state in redux, handle state with useState or useReducer.

Let’s make it simpler.

To start, let’s take the example of submitting and validating multi-field forms.

function MyForm() {
  const [state, setState] = useState({ username: '', age: null });

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

    console.log('submitting', state);
  };

  const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setState({ ...state, [name]: value });
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>Hi!</h1>

      <p>Enter your name:</p>
      <input type="text" name="username" onChange={handleChange} />

      <p>Enter your age:</p>
      <input type="text" name="age" onChange={handleChange} />

      <br /><br />
      <input type="submit" />
    </form>
  );
}

That is a lot of code to handle a form. Here we can see that with each keystroke (change) in the inputs, the status is updated. When a form is submitted, this status is read, validated and printed on the console.

Now let’s make this project smaller by eliminating all state management and change handlers.

function MyForm() {
  return (  
    <form>
      <h1>Hi!</h1>

      <p>Enter your name:</p>
      <input type="text" name="username" />

      <p>Enter your age:</p>
      <input type="text" name="age" />

      <br /><br />
      <input type="submit" />
    </form>
  );
}

Let’s say this is our form that we want to use to submit information

Firstly, let’s forget react, and try to recall how it would work without frameworks. So how do we read the values from this form using javascript? Once we have a reference to a form, with for example document.getElementById(‘form’), we can use FormData to read the form values.

const element = document.getElementByID('form')
const data = new FormData(element);

Now the data is of type FormData, so when you need an object that you can actually serialize(the process of converting object state into a format that can be transmitted or stored), you must first have it converted to a simple object. To do this, we use Object.fromEntries.

Then we’ll put it all back together and create an onSubmit handler. Now, keep in mind that when a form is submitted, the form element is available under the event.currentTarget property. Snippet code below

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

  const data = new FormData(event.currentTarget);
  const values = Object.fromEntries(data.entries());
  console.log(values);
};

When we have all these parts together, we will have our final form of project as shown below.

function MyForm() {
  const handleSubmit = (event) => {
    event.preventDefault();

    const data = new FormData(event.currentTarget);
    const values = Object.fromEntries(data.entries());

   console.log('submitting', values);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>Hi!</h1>

      <p>Enter your name:</p>
      <input type="text" name="username" />

      <p>Enter your age:</p>
      <input type="text" name="age" />

      <br /><br />
      <input type="submit" />
    </form>
  );
}

No more state, no more change handler, just sending the form submission event, and working with simple HTML/javascript methods. No react particulars and no use of library other than native methods.

How to handle forms in React, the easy way to do it

Written by Charles Ketchasso