How to Handle Input in React with Hooks

In this tutorial, I’m going to show you how to handle input using React Hooks and form tags.

Step 1.

• Create two useState hooks, the first one will be set to an empty string and the second one set to an empty array.
• Below those, write a function that will pass in the event parameter, and in the body of the function prevent the page from refreshing on default every time we type something by calling e.preventDefault()
• On the next line we will call a function called addItems (this can be named anything) and pass in the value of your empty string you made earlier with useState. After that call the setter function for your empty string and update it with empty another empty string.

The point of this function is to handle the submission/input and make sure it is entered properly. The addItem function will also be storing our string input to the array we created earlier so that we can display it in JSX later.

Step 2.

• Time to build the addItem function, pass in a parameter called text and inside the function body create a new variable call newItems and use the spread operator and right after add the array value, then a comma and an object with our text parameter we passed in.
• Now, set the array with our new variable we just created using our setter function and passing in our newItems variable.

This function is responsible for handling our new input and adding it to the array.

Step 3.

• Now create a form tag inside of the main div and call the onSubmit handler and set it equal to our submit function and put curly braces around it.
• Create an input tag inside of the form and set the type equal to text, the value equal to our string value we made and set the onChange handler equal to an arrow function with the event parameter passed in and call the setter function for your string value we made in the beginning. Make sure to add e.target.value inside of the setter function for this part.
• Now create a button with the onSubmit handler and set it equal to the submit function we created.

This piece of JSX calls the form and sets the input in our form to whatever we have stored in our string value. The setter function will update our string value to whatever is typed in the input bar and then update the array with that string value.

Step 4.

• Finally, we want to show the results of our array. A nice way of doing this is by using a map function. Just below our form tag, create a new div and inside that div write some curly braces. We will be calling our array and mapping over it in these braces.
• It’s good practice to create an index or some sort of identifier for each item when mapping an array of data. To keep things simple, I will indexing over it, however, this can also be done using unique id’s as well.
• Inside of our map function we will create an arrow function and pass in variable we will call later to show the data (this can be anything, I set mine to item) and then an index.
• Now, instead of using curly braces to hold our code in the function, we will be using regular braces because we want to return JSX that will display our items and not actual raw code.
• Inside the map body create a div and give it a key of our index we passed in earlier.
• Finally, inside the div, in curly braces, call our variable we passed in the arrow function (mine is called item) and add the text binding to it. This will show our data in text.

Your code should look something like this:

When I was learning React, one of the first things I wanted to figure out was how to handle input. This can be confusing when starting out if you don’t know React that well of the ES6 syntax either. Hopefully this guide helps you out, and if you have any questions leave a comment.