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 ***
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/
#react #javascript
