DEV Community

How to add a Search Bar in React

Debora Galeano on November 07, 2020

This post will cover the following: Simple steps on how to add a search bar in React We'll use useState for managing the input text field Filter...
Collapse
 
terrancecorley profile image
Terrance Corley

Awesome post! I’m curious, would it be better to manage the filtered list in state? Wondering if it’s “best practice” to pass a list as a prop down that isn’t being managed by state.

Collapse
 
deboragaleano profile image
Debora Galeano

Hi Terrance, thanks for your message! The contacts list is actually being managed by state and passed down as props. The difference is that it's conditionally doing so through the filteredContacts (so if there's no search, contacts list will be passed down as is, if not, it will passed down same list but filtered). Not sure if I'm answering your question.🤔

Collapse
 
terrancecorley profile image
Terrance Corley

Yeah! Makes perfect sense. The thing I noticed is you pass down filteredContacts, not contacts, so you never have the filtered list of contacts in state. That’s the part I was curious about if it’s “best practice” or not. I do see that filteredContacts is created from contacts, but filteredContacts just lives in a variable that is passed as a prop, it’s not actually a part of your state. I don’t know if that really matters though. Regardless, awesome post! Keep em’ coming.

Collapse
 
zdev1official profile image
ZDev1Official

Amazing!
That helped me a lot!

Collapse
 
deboragaleano profile image
Debora Galeano

I'm glad it did. Thanks for letting me know! :)

Collapse
 
zdev1official profile image
ZDev1Official

Yes! No problem!

Collapse
 
theanamhossain profile image
Md. Anam Hossain

Awesome. Thanks for sharing.

Collapse
 
hajarnasr profile image
Hajar | هاجر

Awesome, Debora! ❤️

Collapse
 
deboragaleano profile image
Debora Galeano

Thanks so much, Hajar! ☺️

Collapse
 
brunowolf profile image
They Call Me Wolf

So simple. Perfect. Thanks a thousand.

Collapse
 
segdeha profile image
Andrew Hedges

Didn't know about Mockaroo. Very cool!

Collapse
 
femi_akinyemi profile image
Femi Akinyemi

Thank you for this 😊 It really helped.

Collapse
 
yahaya_hk profile image
Yahaya Kehinde

Yes! Two articles down!. Great work 🎉🥳