How to handle multiple form inputs in reactjs

Published in

ZestGeek

3 min readOct 31, 2018

In this article, I will tell you how to handle multiple form inputs in a simple and easy method. Whenever we creating a form then we have to handle multiple inputs and its value for manipulating data according to the requirement. So, then we have to know that how to handle the multiple inputs.

I will be giving you a simple login example for handling form inputs in reactjs

The first step we have to create a login component then we have to create two inputs that are email and password. So, lets created it :

As you can see this basic login UI form, In the next step we have to handle the state of these two input fields, so we might set state in component’s state.

In the next step, we need to collect both input field value using the onChange event listener. Now, the main problem occurs. We see two input fields, so our expected reaction might be to create two onChange handlers.

This will work fine. But if we have to add different fields, Do we really want to write a new onChange handler function for each?

No, It’s actually very easy to write a one onChange handler function for handling multiple input fields, we just need two know about two things:

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

The ES6 feature bracket notation, it is possible to assign keys to objects in object literals. To use bracket notation to assign a key when the object is stored in a variable. See the below example:-

The main advantage of bracket notation is we can simply calculate a JavaScript expression within the brackets if it is an object. See the below example:-

Now we can know about basic bracket notation syntax and know that how useful it is during coding.

Let”s move on to the second thing the name of the form element. In HTML, form input often have a name property, with the help of name property of inputs fields. We can simply access this name property from the event object that we receive from an onChange event handler. For example:-

Now, let’s return to our login example. You may notice something the key names of our state object in a login component that is:-


state = { 
    email: '', // key name is (email)
    password: ''  key name is (password)
}

And it is also matching up with our input fields name for example :


<input type="text" name="email" /> // name of the element is (email)<input type="password" name="password" /> //name of the element          is(password)

Now, We can know all about how to handle multiple inputs fields with the understanding of bracket notation and name property of an element, let’s create a correct and useful login component with multiple input fields with only one onChange event handler function see the above code:

We get the event.target.name (which will be either “email” or “password”).
Use it to target the key on our state object with the same name, using bracket notation syntax.

You can see that it is much better, for using multiple input form fields in future. So keep this point in your mind for making your component more generalized.

I hope you enjoyed this article on How to handle multiple form inputs in reactjs.

Clap 👏 for this article if you find it useful 😃

Feel free to comment and like this article so that others can find it easily on Medium!

Hi, My name is Ajay Singh Rajput. I am a Frontend Developer at ZestGeek. I write about JavaScript and reactjs. And sharing my worldview with everyone join my quest by following me at Twitter or Medium.

Want to learn more about JavaScript, Reactjs and Life? Check out my other articles:

6. Login with Facebook and Google in reactjs

7. How to setup redux and react router v4 in your react app

8. Setting up a React.js project with simple steps

And thank you for reading this article if you like it then share it, with your friends and enemies. And I will be writing more about JavaScript,react.js, stay connected with me.

How to handle multiple form inputs in reactjs

Written by Ajay Singh