One handleChange() to Rule Them All

Handle infinite React form inputs with one simple method

Photo by Lautaro Andreani on Unsplash

I’d like to share a little trick with you for React’shandleChange() method. I far too often see people creating 15 to 25 different methods — one for each input field. I also see long switch statements with twenty cases. It’s unnecessary. I’m going to show you how to change your input elements slightly so that you can have a single handleChange() manage as many inputs as you’d like. I won’t bore you all day. Let’s jump straight in. And if you’re a fan of functional components, stick around. I will cover this for functional as well. Check back soon for React-TypeScript versions.

A basic component with multiple handleChange functions:

Update handleChange

In this example, there is a handleChange for each input. Building off this example, we’ll walk through a few steps and update it. The first thing we need to do is update our handleChange.

Now we follow a few simple steps to update the component.

• Start by changing the name of one of them to just handleChange.
• Change the key name from firstName or whatever other value is there to [e.target.name].
• We will add a name attribute to each input in the render now.
• The onChange will just be {this.handleChange} now.

Update <form> in render

A Class Component with a Single handleChange

A Functional Component with a Single handleChange

Now, I know that some of you prefer functional components, so we’ll cover this trick for functional components as well. It’s a little bit trickier here, and many of you may have to adjust the way you declare state in your functional components to adopt this new method, but I will explain everything as we go.

This one has a few changes to pay attention to. All of these were commented inline, so after reading this, browse the code again. You are likely accustomed to using more than one setState in the head of your component. To make a single handleChange work, you’re going to have to contain your state in a single object very similar to this.state({}) in a class-based component. As a matter of fact, you can sometimes copy the entire object straight over.

const [state, setState] = React.useState({
  firstName: "",
  lastName: "",
  fullName: ""
});

One thing to take note of is how to use setState(). By default, using it will replace the entire state object, so you have to make sure you use a spread operator before updating the field you need.

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

That’s it! It’s really that easy! Hopefully this will save you more time than it took you to read this article. This has personally been a game changer for me. I don’t know why everyone isn’t using this method. Enjoy. And don’t forget to hit the follow button. I promise to bring you more tips and tricks soon!