DEV Community

Building a Real-Time Search Filter in React: A Step-by-Step Guide

Alfonsina Lizardo on June 19, 2023

Table of Contents  1. Introduction  2. Requirements  3. Step 1: Setting Up the Project  4. Step 2: Creating the Input  5. Step 3: Render...
Collapse
 
1qdan profile image
Daniel Trifan

One small observation on API call refactoring:

Here:
const filteredItems = apiUsers.filter((user) =>
user.firstName.toLowerCase().includes(searchTerm.toLowerCase())
);

you have to change apiUsers to users

Collapse
 
alais29dev profile image
Alfonsina Lizardo

You're right! thanks for the observation, I just made the change :)

Collapse
 
an_uncanny_mess profile image
parthcs-secondary

Great Post. Thank you for making this super simple

Collapse
 
alais29dev profile image
Alfonsina Lizardo

Thank you! I'm glad it was helpful :)

Collapse
 
riyazbaig profile image
Riyaz Baig

Good👍

Collapse
 
alais29dev profile image
Alfonsina Lizardo

Thanks!

Collapse
 
riyazbaig profile image
Riyaz Baig

hey hi i need your help can you do this in RAWGraphs api call

Thread Thread
 
alais29dev profile image
Alfonsina Lizardo

I haven't worked with that API before, but you should be able to apply the same filtering technique with any API call that fetiches a list of data, just change the API url with the one you need.

Collapse
 
folken718 profile image
OldMan Montoya

To make it more robust i would add a debouce function to avoid super fast and repetitive api calls

Collapse
 
alais29dev profile image
Alfonsina Lizardo • Edited

Thanks for the suggestion! I actually thought about it, but I didn't see it necessary in this particular case since I'm getting the complete list of users with the API call when the component first renders, so there's only ever one API call.

I wanted to also add the case of making the API call when typing on the input and adding the debounce function there, but that would have made the article even longer, so I decided to leave it at that, maybe I'll do an article about using the debounce function in the future :)

Collapse
 
folken718 profile image
OldMan Montoya

Absolutely, in your example is no needed, by the way great example

Thread Thread
 
alais29dev profile image
Alfonsina Lizardo

Thank you!

Collapse
 
najib2050 profile image
najib2050

Thanks for your dedication to help other in understanding such spectacular concepts.

Collapse
 
hasibrashid profile image
Hasib Al Rashid

Thanks for saving my time! I was stuck with this issue for like 4 hours. Thank you very much! 💖💖