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 - www.dipeshmalvia.com/courses/...
**Checkout pre-requites videos in case you have missed **
How to Learn React JS ? - • React JS Roadmap for D...
React JS Fundamentals Project for Beginners - • Learn React JS Fundame...
Learn React Router With Project - • Learn React Router Wit...
React Axios CRUD with JSON SERVER - • React Axios CRUD with ...
🔥 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 - • Learn JSON in 25 Minut...
JavaScript this Keyword - • JavaScript this Keywor...
JavaScript ES6 Arrow Functions - • JavaScript ES6 Arrow F...
JavaScript Higher Order Functions & Arrays Methods - • 13 Must Know JavaScrip...
JavaScript ES6 Destructuring - • JavaScript ES6 Destruc...
**Github link for Reference**
github.com/dmalvia/React_Tuto...
**More videos**
Asynchronous Vs Synchronous Programming - • Asynchronous Vs Synchr...
Async JavaScript Callback - • Async JavaScript Callb...
Async JavaScript Promises Tutorial - • Async JavaScript Promi...
**Checkout my crash courses for get started with web development**
JavaScript Tutorial For Beginners | Part 1 - • JavaScript Tutorial Fo... JavaScript Tutorial For Beginners | Part 2 - • JavaScript Tutorial Fo...
JavaScript Tutorial For Beginners | Part 3 - • JavaScript Tutorial Fo...
JavaScript Tutorial For Beginners | Part 4 - • JavaScript Tutorial Fo...
HTML5 Crash Course in 1 Hour - • HTML5 Crash Course for...
CSS Crash Course in 1 Hour - • CSS Crash Course For A...
🔗 Social Medias 🔗
Twitter: / imdmalvia
Facebook: / dipesh.malvia
Instagram: / dipeshmalvia
LinkedIn: / 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.