When it comes to React hooks, useState is one of the most useful. It can be used to capture information that the user inputs and use it elsewhere in your app.
For example, you could use it to capture the option a user chooses in a dropdown menu or in a series of radio buttons or whether a checkbox is checked or not.
In this post, I'll take you through getting a user's text from a text input field with useState and displaying below.
First, create a new React app and fill it a labelled text input field and some empty paragraph tags, like so -
If you like, you can use the code from my GitHub repo here.
We're going to set the app up so that the user's input will appear in the paragraph tags and will update with every keystroke. We'll therefore use the onChange event listener.
So, our first step is to add "onChange=" to our input tag. We'll need to add an event handler function to handle that change (which we'll set up in a later step). For now, just add the name of the handler function you intend to make to the input tag, we'll call ours "handleChange".
Note: The naming convention for event handler functions is to use "handle" + "the event" - in this case "handleChange".
Since this post is all about useState, we should probably import it. We do this by adding ", { useState }" after React in the existing import statement for React.
Next, we need to add useState to our code like so -
Let's break that down a little bit. Starting with the right-hand side, useState() can take an argument which will be used as an initial state. So if we wanted to have some text in our paragraph tags to begin with, we could add it to the useState brackets.
For example
Would give us this, until we begin typing into the input box -
On this occasion, we don't want to initialise state so we'll just leave it as an empty string within the brackets - useState("").
Now, let's look at the left-hand side of the statement. useState() gives us an array with two values and uses array destructuring. If you're not familiar with array destructuring, you can take a look at an explanation in the MDN Web Docs here.
We've called the values in the array "name" and "setName" but you can call them whatever you like. There is a naming convention of using the same description for both values but with "set" at the beginning of the second value.
The first item in the array ("name") is going to be what we use to display or otherwise use the value given to use by the user.
The second item in the array ("setName") is going to be what we use to tell the app where we're getting the information from. We do this within the handler function.
Let's create that handler function now -
You'll recall that we added an onChange event listener to the input field earlier and gave it a value of "handleChange". Therefore, the input field will call the above function with every keystroke.
Within the function we have given "setName" (from the useState() function) a value. By using "event.target.value", we assign the user's input text to "name".
Finally, we can add the "name" value to the paragraph tags and it will update as the user types in the input field.
You can check your code here.
Try and think of other ways that you can use useState() and practice them. The more you do it, the more it will become second nature. You'd be amazed how often this hook can be used in your apps.
Top comments (0)