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.

Node.js: The Complete Guide to Build Backend Projects [2023]?
Link - https://www.dipeshmalvia.com/courses/Nodejs-Zero-to-Hero

***Checkout pre-requites videos in case you have missed ***
How to Learn React JS ? - https://youtu.be/06yVj8pcO5c
React JS Fundamentals Project for Beginners - https://youtu.be/QoJGKwo20is
Learn React Router With Project - https://youtu.be/kMBjhiGYoLY
React Axios CRUD with JSON SERVER - https://youtu.be/59z1_3-vTOk

? 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***
Learn JSON in 25 Minutes - https://youtu.be/6OhMbf2v_jI
JavaScript this Keyword - https://youtu.be/S2pBGSeUFCk
JavaScript ES6 Arrow Functions - https://youtu.be/TgzVxiPdCDU
JavaScript Higher Order Functions & Arrays Methods - https://youtu.be/m2_kagsc3_c
JavaScript ES6 Destructuring - https://youtu.be/rpYg2M2lNAE

***Github link for Reference***
https://github.com/dmalvia/React_Tutorial_Contact_Manager_App/archive/search-bar.zip

***More videos***
Asynchronous Vs Synchronous Programming - https://youtu.be/oesicy3CcXE
Async JavaScript Callback - https://youtu.be/1zeuvEvw5uw
Async JavaScript Promises Tutorial - https://youtu.be/JvV4Rz2PpzA

***Checkout my crash courses for get started with web development***
JavaScript Tutorial For Beginners | Part 1 - https://youtu.be/t6_waVDdG-E JavaScript Tutorial For Beginners | Part 2 - https://youtu.be/LRLMs0TCflE
JavaScript Tutorial For Beginners | Part 3 - https://youtu.be/sqpy36PNAdk
JavaScript Tutorial For Beginners | Part 4 - https://youtu.be/MQrR0nrvg8o
HTML5 Crash Course in 1 Hour - https://youtu.be/Aj3QFsmsagc
CSS Crash Course in 1 Hour - https://youtu.be/nYsk_U_A_lc

? Social Medias ?
Twitter: https://twitter.com/IMDmalvia
Facebook: https://www.facebook.com/dipesh.malvia
Instagram: https://www.instagram.com/dipeshmalvia
LinkedIn: https://www.linkedin.com/in/dmalvia/

⭐️ 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.