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...
For further actions, you may consider blocking this person and/or reporting abuse
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.
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.🤔
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.
Amazing!
That helped me a lot!
I'm glad it did. Thanks for letting me know! :)
Yes! No problem!
Awesome. Thanks for sharing.
Awesome, Debora! ❤️
Thanks so much, Hajar! ☺️
So simple. Perfect. Thanks a thousand.
Didn't know about Mockaroo. Very cool!
Thank you for this 😊 It really helped.
Yes! Two articles down!. Great work 🎉🥳