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. Let’s start! Create a new react app using npx create-react-app contacts-list Then navigate into the 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: contacts-list . code In your directory create a new folder called and within that create a file. src , components Numbers.js Head over to your file and import your component. App.js Numbers.js Next, we need to create a few persons that we would then pass down as props for our component to render. Numbers.js Now, in our component, we would receive the props being passed down from App and use that to display the Numbers contacts list. See the code below with explanations for each step added as comments. Finally, we return the updated information from each time it’s updated. FilterDisplay If you’re like me and would like to break out your 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. Search First, we will create a component, let’s call this inside our components folder. it’ll take 2 props. Props for the input value and for an onChange event. Filter Filter.js Next, we need to refactor our component so that all it does is to render the filtered persons list. It’ll accept one prop — the list/array. Numbers.js 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 component, we would also pass a handleChange method that gets called when there is a change within the input field. Filter Within our , our 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. return Numbers And that’s it, we’re done!

Read My Stories

Website

Blog

Writer. Editor and Developer.

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Build a Search Bar in React with React Hooks

Too Long; Didn't Read

Company Mentioned

Adebola Adeniran

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Build a Search Bar in React with React Hooks

Too Long; Didn't Read

Company Mentioned

Adebola Adeniran

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES