Reset an input field value in React with the update function provided by the useState hook
In this lesson, we implement a "search reset" feature that allows users to click a button to reset the value of the Search component. We use the update function provided by React's useState hook to do so. We also implement a Footer component to complete our application UI.
Simon Vrachliotis: [0:00] Let's implement a quick search reset button to place under the name picker. We only want to show it when the search value state is not empty. I'll create a new component called reset-search.js. Import React. Export the function called ResetSearch().
[0:18] It will accept the searchValue state but also setSearchValue to be able to reset it. If searchValue is empty, we'll simply return null. Otherwise, we'll return the button with the className of reset-search and an onClick prop that directly calls setSearchValue and sets it to an empty string. The button text will say "reset search."
[1:02] I will also quickly add a footer component to complete the app UI. There is nothing special about this component. It's just hard-coded JSX without any props or state, so I will just paste it right there.
[1:20] Our app is now feature complete.