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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!