How to Build a Search Bar in React with React Hooks
Published: 2020-03-21 06:00:33

<img src="https://hackernoon.com/drafts/1zgb2asw.png">
Below is a small gif of what we will be building. A simple search box that allows us to search through a contact list. We would be using functional components rather than class-based components to achieve this.
<img src="https://hackernoon.com/photos/da7H4NzOhAdhje46xkTgaLorF5m2-nz22a6w">
Let’s start!
Create a new react app using

<code>npx create-react-app contacts-list</code>

Then navigate into the contacts-list directory. Open the directory in your favourite code editor. In my case, I’m using vscode, so all I need to do from the command line is used:

<code>code .</code>

In your src directory, create a new folder called <b>components</b> and within that create a <b>Numbers.js</b> file.

Head over to your <b>App.js</b> file and import your <b>Numbers.js</b> component.

Next, we need to create a few persons that we would then pass down as props for our <b>Numbers.js</b> component to render.

To get in-Depth knowledge on Reactjs you can enroll for a live demo on <b><a href="https://onlineitguru.com/reactjs-training.html">Reactjs Online Training</a></b>

<img src="https://hackernoon.com/photos/da7H4NzOhAdhje46xkTgaLorF5m2-ld8l2adg">


Now, in our <b>Numbers</b> component, we would receive the props being passed down from App and use that to display the <b>contacts list</b>.

See the code below with explanations for each step added as comments.

<img src="https://hackernoon.com/photos/da7H4NzOhAdhje46xkTgaLorF5m2-aaab2a5m">

Take your career to new heights of success with <b><a href="https://onlineitguru.com/reactjs-training.html">Reactjs Training</a></b> 

Finally, we return the updated information from <b>FilterDisplay</b> each time it’s updated.

If you’re like me and would like to break out your <b>Search</b> bar into a separate component, then read on. Let’s refactor this baby! Breaking out our search into a separate component would allow us use the same search bar in other components within our application.

First, we will create a <b>Filter</b> component, let’s call this <b>Filter.js</b> inside our components folder. it’ll take 2 props. Props for the input value and for an onChange event.

<img src="https://hackernoon.com/photos/da7H4NzOhAdhje46xkTgaLorF5m2-5pbp2aes">

Next, we need to refactor our Numbers.js component so that all it does is to render the filtered persons list. It’ll accept one prop — the list/array.

<img src="https://hackernoon.com/photos/da7H4NzOhAdhje46xkTgaLorF5m2-r0d92akk">

Recall that all our state is being managed within our App component and being passed down to our components as props.

Finally, in our App component, we will pass a stateful value to the input field in the Filter component, we would also pass a handleChange method that gets called when there is a change within the input field.

<img src="https://hackernoon.com/photos/da7H4NzOhAdhje46xkTgaLorF5m2-leee2ay9">

Within our return, our Numbers component will always check if the input field is blank. If it’s, we render the original Persons array else we render the list based on what’s entered in the input field.

To learn more about the Features of  React.js, you can enroll for a live demo on <b><a href="https://onlineitguru.com/reactjs-training.html">Reactjs Certification Course</a></b>