Handling Multiple Form Inputs in React

A quick and simple guide

Tom Kelly
Tom Kelly
Jul 10, 2017 · 2 min read

I often see students get tripped up when there are multiple form inputs to handle in a single component. For example, consider a basic Login form. There’s a good chance it will look something like this:

Naturally, we want to handle the state of these two input fields, so we might set aside two fields on this component’s state.

Now, of course, we need to collect the values in those input fields using an onChange listener.

This is where the trouble starts. We see two input fields, so our knee-jerk reaction might be to create two change handlers.

This will work but…ew, right? What if we have a whole slew of different fields? Do we really want to write a new change handler for each?

It’s actually very easy to write a generalized change handler — we just need two ingredients:

1. The name of the form element.
2. The ability to use bracket notation to define our new state object.

Let’s focus on number two. In particular, there’s an ES6 feature that will help make this even easier, so let’s learn about that first.


As of ES6, it is possible to use bracket notation to assign keys to objects in object literals.

Right now, we know what it looks like to use bracket notation to assign a key when the object is stored in a variable.

const obj = {};

obj['someKey'] = 1;

console.log(obj.someKey); // 1

The advantage of bracket notation is that we can calculate a JavaScript expression within the brackets.

const obj = {};

obj['keyNo' + '2'] = 2;

console.log(obj.keyNo2); // 2

However, so far we’ve only been able to do this as long as our object is in a variable. Now we can use brackets when defining the object literal, like so:

const obj = {

['keyNo' + 3]: 3, // wowzers!

regularKey: 4 // a regular key assignment, for comparison
};

console.log(obj.keyNo3); // 3
console.log(obj.regularKey); // 4

Now that we have more flexibility in using bracket syntax, let’s return our attention to the first ingredient: the name of the form element.

As you may have noticed, regular <input> elements often have a property called name:

<input type="text" name="email" />

This name property is also part of HTML — it’s not particular to React.

We can access this name property from the event object that we receive from an event handler:

onChange (event) {
console.log(event.target.name); // the name of the form element
console.log(event.target.value); // the value of the form element
}

Now, let’s return to our example. You may notice something convenient: the key names on our state object…

this.state = { email: '', password: ''}

…match up with the names of our inputs:

<input type="text" name="email" />
<input type="password" name="password" />

This means we can leverage the two ingredients we introduced above, and write a generalized change handler, like so:

Much better!

If you find yourself writing multiple change handlers in a single form, stop and consider how you can condense it into one.

Better Programming

Advice for programmers.

Tom Kelly

Written by

Tom Kelly

Software developer, instructor, mentor

Better Programming

Advice for programmers.