Update state in React with the update function provided by the `useState` hook
In this lesson, we implement a "shortlisting" functionality to allow users to click on a name to add it to their shortlist. We use the useState hook to maintain that shortlist, and use the update function it provides to amend the list when a user clicks on a name.
Simon Vrachliotis: [0:00] Time to build a shortlisting functionality which allows users to click on names to shortlist them. Clicking on the name from the shortlist releases it back into the list. We'll want another piece of state for the shortlist. Since it will be shared between the name picker and the shortlist, we'll maintain this state in our app component.
[0:19] I'll create a new piece of state, const [shortList, setShortList] = useState. useState will be an array of ids. We'll default these to be an empty array. Let's pass shortList and setShortList props to our NamePicker component, and receive them from there.
[0:43] We also need to create a new component called short-list.js. Import React, export a function called ShortList() which accepts the shortList and setShortList props. For now, let's just output the stringify(shortList) in a <pre> tag.
[1:01] Back in App.js, we can import a new ShortList component. Place it down here between search and NamePicker and pass it to shortList and setShortList props. As expected, we see an empty array for the shortList. Now, we want to add a name id to the ShortList when a user clicks on it.
[1:22] In our NamePicker component, we listen to the click events with an onClick prop on the button element which we'll call addToShortList when firing.
[1:32] Let's define addToShortList() up here. It needs to know the id of the name clicked so back now on onClick event down here, we'll pass addToShortList as an arrow function and pass the id as an argument. Let's receive that param in the function and try to log it to the console.
[1:53] Cool, it works. Instead of logging it to the console, let's update our shortList. We'll call setShortList and here use the spread syntax to create an array that takes the existing shortList as well as the new name id. Now, when we click on names, we can see their ids added to the shortList.
[2:14] There is an obvious problem though. If we click on the same name again, it gets added to the shortList multiple times.