Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Learn how to apply a search filter in React JS and construct a search bar example in React. When React apps receive API data, we often need to search the data to filter results that match our search.
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React: https://bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: https://bit.ly/FAANGInterview
Subscribe https://bit.ly/3nGHmNn
React JS for Beginners full course - 9 hours: https://youtu.be/RVFAyFWO4go
Course Updates https://courses.davegray.codes/
Discord: https://discord.gg/neKghyefqh
Completed Source Code: https://github.com/gitdagray/react_search_filter
Search Filter in React JS with Search Bar Example
(00:00) Intro
(00:20) Welcome
(00:30) Starter code and dependencies
(02:08) Create an axios instance
(04:15) Setting initial state
(06:20) SearchBar component
(13:50) ListPage and Post components
(16:38) Quick debugging
(18:24) Testing the functionality
Buy Me A Coffee: https://www.buymeacoffee.com/davegray
Tutorial References:
FontAwesome in React: https://fontawesome.com/docs/web/use-with/react/
JSON Placeholder - Posts: https://jsonplaceholder.typicode.com/posts
ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
General React References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library)
React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location=
Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven
Was this React Search Filter and Search Bar tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#react #search #filter