Manage local state in React with the `useState` hook

Simon Vrachliotis: [0:00] Let's build these search components that allows users to filter the list of available names. We're going to create a new file in our components folder, search.js. Again, we'll import React from 'react' and export a function called Search().

[0:15] For now, we'll return an input with the type of text and a placeholder text. We'll import that component in App.js and add it to the render tree.

[0:33] Here's a nice reminder that you need a single top-level element in your components. You can see the error here. We'll import Fragment as well from React and wrap our render into one of those, and the error goes away.

[0:48] Back in our search component, let's wrap our input in a header tag which will add some styling. As you can see, I can type in the input field since it's a regular HTML input.

[1:00] Currently, the state or value of that input is controlled by the DOM. In React world, this is called an uncontrolled component. Since React doesn't control the value of it, the DOM does.

[1:12] In our case, we want to use that search value to filter our list of names, so we definitely want React to take control of this state, so we can use it somewhere else in the app. The DOM should not be the source of truth for that input value.

[1:25] I will add a <pre> tag under the search here to demonstrate. I will put some Xs for now, but we want this to match the search value when the user types.

[1:34] To handle this state, we'll import a React Hook called useState. UseState gives us an array with two things, a stateValue and an updater. You can name this as you please, but a good convention is that if your stateValue is called thing, then the updater would be called setThing. In our case, let's go with searchValue and setSearchValue.

[1:59] Inside the useState call, we can pass the initial or default value, Simon for now as a demo. In my input elements, I will add a value prop and set it to searchValue. I will also update my <pre> tag to use the searchValue. Hit save and it works.

[2:16] The search input now says Simon, but I can't type anything. The input value is stuck on Simon. It's essentially read-only. The error in the console tells us why. We set a value, but no way to update it onChange.

[2:30] Let's add an onChange prop. OnChange is a synthetic event which behaves very similarly to the onChange browser events. When that happens, we'll call a handleChange method. Let's create that function here, function handleChange(). It will take an event. Then do setSearchValue(event.target.value), which will set the searchValue to the change input value.

[2:56] We have now taken control over the input field state, as you can see in the pre tag. Let's clean up that pre tag, as we don't need it anymore.