paint-brush
How to Build a Search Bar in React with React Hooks by@adebola
19,156 reads
19,156 reads

How to Build a Search Bar in React with React Hooks

by Adebola Adeniran
Adebola Adeniran HackerNoon profile picture

Adebola Adeniran

@adebola

RoR and JavaScript Engineer. Chief of Staff @Moni.Africa

March 15th, 2020
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

How to Build a Search Bar in React with React Hooks? How to build a simple search box that allows us search through a contact list. We would be using functional components rather than class based components to achieve this. If you’re like me and would like to break out your Search bar into a separate component, then read on. Let’s refactor this baby! 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.

Company Mentioned

Mention Thumbnail
Few
featured image - How to Build a Search Bar in React with React Hooks
1x
Read by Dr. One voice-avatar

Listen to this story

Adebola Adeniran HackerNoon profile picture
Adebola Adeniran

Adebola Adeniran

@adebola

RoR and JavaScript Engineer. Chief of Staff @Moni.Africa

About @adebola
LEARN MORE ABOUT @ADEBOLA'S
EXPERTISE AND PLACE ON THE INTERNET.

Below is a small gif of what we will be building. A simple search box that allows us search through a contact list. We would be using functional components rather than class based components to achieve this.

image

Let’s start!

Create a new react app using

npx create-react-app contacts-list

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

code .

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

Head over to your App.js file and import your Numbers.js component.

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

image

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

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

image

Finally, we return the updated information from FilterDisplay each time it’s updated.

If you’re like me and would like to break out your Search 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 Filter component, let’s call this Filter.js inside our components folder. it’ll take 2 props. Props for the input value and for an onChange event.

image

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.

image

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.

image

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.

And that’s it, we’re done!

L O A D I N G
. . . comments & more!

About Author

Adebola Adeniran HackerNoon profile picture
Adebola Adeniran@adebola
RoR and JavaScript Engineer. Chief of Staff @Moni.Africa

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Unni
Tencent
Infoq
Hashnode
X REMOVE AD