Search Filter in React JS with Search Bar in React Example

[@bkatsevych]

That's exactly what I've been looking for! Thank you a lot!

[@DaveGrayTeachesCode]

Glad I could help, Bohdan!

[@ariffaysal9458]

thanks for the clear description with clean react code. learning so much from you! 👍

[@DaveGrayTeachesCode]

You're welcome!

[@gokulpradap]

Hi brother you're so great please use try catch instead of .then catch thankyou

[@DaveGrayTeachesCode]

Both work. I often use try/catch with async/await code. Sometimes I use thenables but not often.

[@gokulpradap]

@@DaveGrayTeachesCode thankyou so much

[@nicholasbrown4372]

Great job Dave! Keep it up with these key React functionalities. I have a personal request. I would like you to make a video on Master-Detail pattern. Thanks

[@DaveGrayTeachesCode]

You're welcome, Nicholas, and thank you for the request! 💯

[@ricktheobserver8113]

wonderful, awesome tut. Big thanks!

[@DaveGrayTeachesCode]

You're welcome!

[@islombekdev]

Thanks Dave! Your videos so helpful.

[@DaveGrayTeachesCode]

You're welcome!

[@andresbreuer]

Thanks again Dave!!

[@DaveGrayTeachesCode]

You're welcome, Andres!

[@Zzyzx-]

Can you make the same tutorial using TypeScript for us?:)

[@Alias_s]

Why doesn't anyone explain how to achieve the same result when we obtain data by clicking the search button?

[@rahulghosh7608]

when i search something and there is no result i simply tap on back space. But the catch is when i tap on back space button its not updating. Link i search something "s" and there is 4 results after that when i type "sh" then there is no results and its totally fine but when i cut the "h" and there is only "s" in search input but it still showing 0 results

[@tacosdesuadero4875]

wonderful tutorial, I thought it'd be more difficult to build but it really was quite simple, thanks

[@DaveGrayTeachesCode]

Glad it helped!

[@elab4d140]

great tutorial, you can make the input value debounced, so that you wont make an api call every time you change the input

[@DaveGrayTeachesCode]

That works if the search input creates a new request every time it changes. That is not what this tutorial does. This example loads all posts (or products or todos or whatever the content may be) as the initial state, and then it filters that state content in the frontend. What you are describing would be a frontend that sends a request to the backend REST API that contains a query parameter. The filtering would then happen in the backend and the results would be sent back. In that case, debouncing would be a GREAT idea. 🚀

[@Bioed-n4c]

How do we do that

[@ernestechie]

@@Bioed-n4che has a tutorial on that

[@ernestechie]

@@Bioed-n4c kzbin.info/www/bejne/g3nQXmWPorx4m80si=7XRxwxCSUssF31hF

[@FundoGenshin]

Did you get the data from api or json from your own project?

[@nicholasbrown7016]

Hey Dave, I would like you to make a video on React.js file uploader of all file types and also an emoji picker. :)

[@DaveGrayTeachesCode]

Thank you for the requests!

[@hardwired66]

Thank you sirr

[@DaveGrayTeachesCode]

You're welcome!

[@bryandelacruz9066]

Hi, is the search button clickable? thanks

[@siddiqahmed3274]

Sir, why didn't you perform setPosts and setSearchResults in same then function?

[@DaveGrayTeachesCode]

Good catch, Siddiq! I don't use thenables that often in preference of async / await, but here I was simply thinking of one thing at a time. You are correct in thinking React will simply batch the state updates and they could both be in the first thenable without the need of the 2nd .then() 💯

[@blackpurple9163]

Why did you not use input type=search instead? I believe that's the exact reason that component was made for Btw if we were to highlight the matching text in resultant posts, how do we implement that?

[@alexotoous]

Optional chaining (?.) was crushing the app so I removed it.

[@DaveGrayTeachesCode]

Hard to imagine that optional chaining has a big impact in a small example like this. Worth a read: blog.allegro.tech/2019/11/performance-of-javascript-optional-chaining.html ..."If your project contains much more optional chaining occurrences, like ten thousand, or you run the code on very slow devices - it might matter. Otherwise, well, it’s probably not worth bothering about."

[@simonedwards7101]

I've just created one of these myself. I wonder how different the code will be 🙂 (Dave the Pro, Simon the Newbie). Will update you later.

[@DaveGrayTeachesCode]

I'm expecting yours to be better, Simon - as all teachers should! 😃 For example, you could make yours case-insentive while my example is not. 🚀

[@simonedwards7101]

@@DaveGrayTeachesCode I did indeed have a case insensitive search. I also took the useEffect route like you mentioned in the video. In addition to the search input field I used a dropdown select to filter on topics / tags. And finally I used fetch to bring in some static json from an Azure cdn instead of using Axios. Thanks Dave for the content. I remember when this stuff was alien to me. 20+ years working in infrastructure now attempting to be proficient in code 🤣

[@mileadavid7007]

Do you know what should I change to see all the data from the API when not searching?

[@mhdfirassbarakat6587]

Great Content Dave Keep Going, Master 😊

[@DaveGrayTeachesCode]

Thank you 🙌

[@andrewaghoghovwia1948]

Great content. Absolutely what I needed!!!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@codingispower1816]

Is there a difference between attribute and attribute? Attribute and attribute are spelled identically but are pronounced differently and have different meanings, which makes them heteronyms. To attrib-ute is a verb so to give credit to someone for something. (verb) Attribute is a characteristic of something (a noun).

[@DaveGrayTeachesCode]

Yes I think I have pronounced this incorrectly at times. Hopefully everyone knows what I mean.

[@codingispower1816]

Oh yeah of course. I'm sure. Thanks for all you do, Dave! Your videos are helping me to prepare for some upcoming react based interviews!@@DaveGrayTeachesCode

[@phongdautranle9911]

Hi Dave, I recently follow your video course MERN stack app. And I am trying to apply notes filter by the way you show in this video, and seem not working. Do you have any other dea to apply filter

[@DaveGrayTeachesCode]

This is the approach / concept I would use.

[@phongdautranle9911]

Thank you!

[@KellenBegin]

Great react tutorial! The word attribute is one of those words (like contract) in which emphasis/accent changes depending on the part of speech being used. Accenting the 'a' is a noun and accenting the 'i' is a verb.

[@DaveGrayTeachesCode]

Thank you, Kellen! Yes, my Kansan way of pronouncing a few things doesn't always mix with the rest of the world 😅 I keep trying!

[@mentoriii3475]

Hey Dave, good implementation, I would like for you to review my implementation with redux toolkit as following: make a posts state in slice -> fetch initial posts from an api where you get all posts, have a secondary api to fetch only searched posts with &search={input} -> and in the parent component have a useeffect where if searchbar.length === 0 dispatch the getAllPosts api result else if search input length > 0 dispatch the getPost api results, while the results of both api calls get stored in initial state which was posts:[ ] and overwrite each other, I think your implementation is better, I had problems implementing pagination if i keep overwriting results of both api's

[@DaveGrayTeachesCode]

Easier to post code snippets on my Discord: discord.gg/neKghyefqh

[@regilearn2138]

Awesome superb, and Dave once we fetch the data using redux , or component state will not available after the page refresh, in order to keep data(persist data) during page refresh, what is the recommend way, Please let me know your thought.

[@DaveGrayTeachesCode]

You are correct. Refreshing a web app is just like reloading a program. When using Redux, there is an npm package called Redux-Persist: www.npmjs.com/package/redux-persist - I think it uses localStorage so I wouldn't use it with anything like passwords or web tokens though.

[@Roronoa1062]

Great tutorial, but I have these questions : what if I don't wanna use onChange function, rather I would want to use event listener to handle the onChange event [ I was not using form (I was just having a input tag and a button), so I guess using form would resolve the issue where I have to take two function onChange & onClick to register the input and click respectively]. And secondly using onChange is a good practice or not in terms of vulnerability.

[@DaveGrayTeachesCode]

I think you answered your first question, but you can handle single change events or gather all input info from a form submit event. I recommend controlled inputs in React vs using an event listener as with Vanilla JS. 2nd question - Nothing wrong with an onChange in React. They are used all the time.

[@SVAMYIYA]

What to do if npm doesn't work because Node.js is not supported on Windows 7? Why didn't you say anything about this?

[@DaveGrayTeachesCode]

Microsoft already declared Windows 7 end of life: www.google.com/search?q=windows+7+end+of+life And I cannot comment on every possible operating system. That said, this Stackoverflow answer may help you: stackoverflow.com/questions/62212754/latest-nodejs-compatible-with-windows-7 If not, it is high time to upgrade from Windows 7.

[@SVAMYIYA]

@@DaveGrayTeachesCode Sorry, but can search be implemented using CDN by connecting React?

[@DaveGrayTeachesCode]

@@SVAMYIYA a React app can use a CDN. The API data will come straight from a server.

[@gmjitendra]

Very nice Dave. My personal recommendation if you can cover test cases as well :)

[@DaveGrayTeachesCode]

Absolutely! This request is on my list - thanks!

[@egajelic]

Hi dav, any plan to make typescript crashcourse or series?

[@DaveGrayTeachesCode]

Yes, Typescript series coming soon!

[@egajelic]

awesome !

[@rolibernanda3660]

Great my man Why did you use chain promise instead of just use setSearchResults and setPosts in the same .then block?

[@DaveGrayTeachesCode]

Thank you 🙏 and good question that I believe Siddiq also asked. It is not needed. Too often I get caught up in "teacher mode" and give implicit instructions like do this, then this, then this. When I'm coding and not teaching, I try to be more declarative. This was part was overly implicit.

[@aymenbachiri-yh2hd]

thank you

[@AveN7ers]

Easy enough but is filtering in the frontend something that's done in the real world or do they send a request to the backend database?

[@DaveGrayTeachesCode]

Both. Depends on the situation.

[@metadance3028]

I really wating for a new course from you about typescript and CI/CD concepts, all your tutorials helpful to much. Thank you a lot.

[@DaveGrayTeachesCode]

Thank you! 💯

[@Sudhentertainment]

great dave make such short videos with specific react features. Thst will be very great

[@DaveGrayTeachesCode]

Thank you! 💯

[@IsraelMendoza-OOOOOOO]

👍

[@P3truts]

Finally a good searchBar example. Most use/show the searchBar as being the only component that filters through data.

[@DaveGrayTeachesCode]

Thank you! 💯

[@wesleyowen904]

I like your videos and was wondering if you could do a project with flutter front and back end?

[@DaveGrayTeachesCode]

Thank you, Wesley! I have not yet gotten into Flutter, but I've heard good things!

[@biLLie_wiLLie]

It would be great from you to show how to search, filter and highlight results of posts from api. Thank you!

[@DaveGrayTeachesCode]

Thank you for the request!

[@DineshVutukuru]

Please make tutorials for unit testing and redux connect as well.

[@DaveGrayTeachesCode]

Thank you for the requests!

[@deekshithpv4327]

Thank you Dave! I just wanted to say thank you! I just had to! :D

[@DaveGrayTeachesCode]

You're welcome! 🙏💯

[@ashutoshtripathi8257]

Hello sir, can you start interview series for reactjs

[@DaveGrayTeachesCode]

I've got a few other topics planned first, but I'll add this request to the list! 💯

[@ateebasif5360]

Hey can you please do this with a table pagination where we can go to next page and when we search we get the searched results with the pagination

[@DaveGrayTeachesCode]

To do this, we would query a REST API that allows for search parameters and provides paginated results. After receiving the results, we could provide use pagination on the front end or infinite scroll - I have tutorials on both of those in this same playlist. Thanks for the request!

[@ateebasif5360]

@@DaveGrayTeachesCode thank you so much for your reply i found that video you mentioned and your content it's really helpful.

[@hassamulhaq7762]

Teaching method is really awesome. you explain the functionality plus take care how to manage components. Dave i have a query, I'm using Laravel for backed and from last month i start learning react. One thing i notice in node/express we need to write raw MySQL queries but in laravel we have Eloquent ORM, and in PHP we have propel_orm using these our work will be easy. As I'm beginner in node, express is there any easy way to write sql queries.

[@DaveGrayTeachesCode]

There are several available, but the most popular ORM is Sequelize: www.npmjs.com/package/sequelize

[@hassamulhaq7762]

@@DaveGrayTeachesCode thank you 🖤

[@OneworldKW]

Great video. I like the way you explain things.

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏

[@hussenelswaf9660]

Great content. Absolutely what I needed!!!

[@DaveGrayTeachesCode]

Glad it helped!

[@Собственник-т3к]

Thanks

[@DaveGrayTeachesCode]

Welcome!

[@mtpk0]

😎

[@sonamohialdin3376]

Awesome tutorial thank you

[@DaveGrayTeachesCode]

You're welcome!

[@dharmeshgohil9375]

Nice

[@DaveGrayTeachesCode]

Thank you!

[@ricktheobserver8113]

Hello Dave, quick question, instead of passing props to give App.js the resultArray, can you teach us doing it using Redux and RTK. Love you!

[@DaveGrayTeachesCode]

Thanks for the love and request!

[@ucNguyen-qz2lf]

High quality tutorial as usual. Thanks Dave!

[@DaveGrayTeachesCode]

You're welcome!