Build React Search Filter with React Hooks | ReactJS Search Bar | React Tutorials for Beginners

In this video we are going to learn how to build a search filter using React and React Hooks. We will 2 React Hooks in this video useState() and useRef(). We will make the search bar and filter out the contact list that we are fetching from our JSON server.

Our contact search will be not be case sensitive we can use both uppercase and lowercase for search and it we can search a contact by it's name or email address.

***Checkout pre-requites videos in case you have missed ***

🔥 Video contents... ENJOY 👇
0:00:00 - Intro
0:00:14 - What we want to build ?
0:01:19 - Adding Search bar JSX
0:02:43 - Adding useState Hook
0:03:42 - Pass State as Props
0:03:53 - Pass Function as Props
0:05:12 - Add State to Input Element
0:06:00 - Adding useRef Hook
0:09:46 - Search Filter with Array Filter Method
0:15:17 - Outro

***Checkout these video to understand better***

***Github link for Reference***

***More videos***

***Checkout my crash courses for get started with web development***

🔗 Social Medias 🔗

⭐️ Hashtags ⭐️
#React #Reacthooks#Tutorials

Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

[DipeshMalvia]

Guys, if you feel this video was helpful in any sort than please hit the like button and subscribe channel. I really need your support to keep myself motivated.😎

[cocos]

worked like butter, thanks so much. Keep the work, it's important for thousands of us :)

[ajaychoudhary]

if you use input filed in another component like using header component using input filed then how will we use search functionality using api response

[missphantomhive]

This video helped me a lot!! Couldn't find any other video as useful as this for implementing Search.

[AkhilAravind]

Nice Presentation. Very simple to understand still that exaggerating accent though.

[vignesh-li]

hi nice video, if i m entering the key word it need to change color, how can we do that one plz replay. Thanks

[Array_of_objects]

IF your using the reactstrap <Input></Input> instead of the regular html <input></input> you need to change your ref={searchTerm} to innerRef={searchTerm}

[srikanthanthati]

Hai sir 🙏🙏🙏🙏🙏🙏🙏🙏🙏
I got job of your videos and one Redux video
I don't have words but THANKSSS SIR

[shashankshah]

Thank you! I was thinking I needed API and I do not have the pagination either so this is best approach to filter array and search the value from an array of objects. It works so fast on each and every key stock! Eyes on you subscribed already! Cheers!

[aiyushbedi]

It would have been better to create a resuable compenent which we can use anywhere rather than only in one place

[SethBoot]

This question is asked by My interviewer with countries list .

[Sahiba]

Thank you so much sir. I finally implemented it.

[knnethtan]

How to search the filename and view the photo or download in the local drive? Such as C:/temp, or network drive?

[DeepakSingh-hk]

Awesome !! Thanks a lot for making the React Beginners playlist

[okparaobinna]

Nice Video but can I use the same concept in class component?

[dineshsilwal]

Dipesh Malvia Please make video on context api

[shinchan]

The full code is done but it's not working not able to add contacts not showing

[harikarthick]

what is contact at 8:51, while contacts are the data from API

[singhvimlesh]

hELLO sir .One thing I have know if during the search input if user enter some text in input box I have wait for 5sec or 4 second using setTimeout( ) then render the list so how can we use settimeout().

[waseemwassu]

How to save the search history, using local storage here??