DEV Community

Cover image for Search Bar in React JS!

Search Bar in React JS!

Saleh Mubashar on January 03, 2022

Hi guys! In this post, we will learn how to create a fully functional search bar in React JS. We will start by setting up some sample content and ...
Collapse
 
wayungi profile image
wayungi

Very helpful article. Many thanks

Collapse
 
ayobami profile image
David

Thank you for this information. 👏.
But would the List component be able to import data from ListData.JSON file because you did not export data from the json file.

Collapse
 
salehmubashar profile image
Saleh Mubashar • Edited

Yes it would
since it is JSON data, you can simply import it as 'data'
you can think of the data file as simply an array

Collapse
 
ayobami profile image
David

Ahh nice one, thank you 🙏

Collapse
 
astrobotme profile image
Aditya

This is Nice But When your search query exceeds one word or more .. it fails badly. Here Because the List items are single word and a single word query makes sense but in real-world applications where the things you were searching in will be more than one words so does your query
One Should use a better approach to handle it

Collapse
 
salehmubashar profile image
Saleh Mubashar

That's a great point. I completely overlooked that while writing this. Often times, real time searches work perfectly using only a few letters. But yeah, a better approach for real world applications does make more sense. Thanks for the comment!

Collapse
 
thejsdev profile image
the JS DEV

Nice post

Collapse
 
salehmubashar profile image
Saleh Mubashar

thanks :)

Collapse
 
sameervanjari profile image
Serious Sam

Thanks it was a great help

Collapse
 
crsandeep24 profile image
Sandeep Reddy

What if no search results? How can we display a 'No results found' error?

Collapse
 
salehmubashar profile image
Saleh Mubashar

We can check the length of the filteredData array. If it is less than 1 then no results.

if (filteredData.length < 1) {
   // something
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
prashant2372004 profile image
prashant2372004

sda