Search Filter in React JS - Filter Through Results

In this video we build out live search functionality using the filter method, map method, and some react state. We import data from "Mockaroo" which is a pretty cool platform that allows you to draft up mock data for use while building applications. We save the data in to a "data.js" file, but it can simulate getting data back from an API (minus the API call in this case). Thanks for watching!
❤️ Support the Channel
www.buymeacoff...
Instagram 💪
/ fireclint
Github Repo
github.com/fir...
Mock Data
www.mockaroo.com/

[@josephomotade864]

You are behind my success with react and being a web developer. Thanks again bro.

[@codecommerce]

Thank you Joseph!!

[@santhoshn9769]

I feel like very comfortable in search filter. after watching this

[@juanxc7]

my bro here just accomplished what I've been struggling with for a whole month in 8 minutes what a pro

[@kattagurunadham9425]

hlo bro iam not getting the searchbar bro

[@sebastianlozano7707]

Literally I watched 5 other videos trying to understand how to render the list filtering the data and they made it look so difficult! You were way clearer my friend! Thanks so much!

[@marcelooliveira5034]

thank you so much for this! really helpful and straightforward. exactly what I needed for a project!

[@joshigaming1971]

Wtf, I Knew Everything, But I couldn't Implement, That's Really Easy,I appreciate Your Work ,🎉 .......Sorry For My Horrible English

[@benrenny9828]

Hey Colin I'm grateful for your content. Keeps improving my js skills. Please a typescript tutorial will come in handy

[@codecommerce]

Thank you dude! Typescript coming soon

[@shahidshafi1227]

It's much easier than I thought. I thought making a search filter would be complex. Thanks for sharing ❤.

[@codecommerce]

Debunking the complex stuff!! Thank you Shahid!

[@coffee80119]

Thanks for the tutorial, short and down to the point. Mockaroo also is a great tool to use i think. Can you do a tutorial on facets searching also in nextjs and firestore?

[@matthewtang6806]

Thank you for your tutorial! Would be pleased to know if i've seperated the SearchBar & CustomerTable, how can i access the search value of useState in SearchBar.jsx in CustomerTable filter( )?

[@anandgomaskar2210]

thanku so much upload this vidoe it's really hlep me

[@nanakwekuotoo1775]

I don't know how you're being slept on. You're my best react teacher on here💯

[@codecommerce]

Haha thank you Nana!

[@robbobpirate3678]

that .includes() is a game changer thanks for the knowledge

[@codecommerce]

Thank you!

[@marcusaureliusregulus2833]

I am somewhat new and was just wondering, will this not be slow? Or is this the best way how it is done? Apart from server side fetching. Will it be ok with thousands of items?

[@FootballForThePeople]

Hey. Yet again, great video. If I also want to filter by another param such as.. email. Syntax wise, how would you go about this - if we want to filter by not only name but more?

[@JasleenKour-ue1ie]

sir if u search with upprcase letters than it won't show anything....so can u help with that

[@anoopk.s1255]

I Check so many videos but don't understand.this video so comfortable and understand ❤ thanku

[@codecommerce]

Thank you- much appreciated!

[@vimz92]

Bro, Thank you so much. Subscribed

[@codecommerce]

Thanks Vimal!

[@Deqike_Michael2]

gr8 video, but how about last name, email, phone searching? is it possible to search simultaneously whenever I typed once?

[@the-boss-98]

Every video you make is so helpful

[@MuneebUrRehman-fv4qk]

Thank you so much, this code filtering data from column first, but I want to filter data in both column I mean first name and last name. Please guide me or make a video. Thank You.

[@AkyeampongKwekuPrince]

How did you convert the json data to normal object data inside the Vs code? struggling with that for days

[@Carla-ib4ue]

Nice video. Mockaroo seems to be a great tool, gonna make my next project using it! Thanks!

[@codecommerce]

I use it all the time!

[@redh4y]

How can I have the same result considering that my search input is a separated component?

[@SyedHazratRazaQuadri]

how to handle if my form in different component like input tag search bar is there in navbar component and my data is in product component?

[@alensacipi5433]

such a great video, thanks for this this was straight forward and just on point really great content, immediately subscribed!! I think at line 39: it is only missing a .toLowerCase() after search so the input is always right => .... .includes(search.toLowerCase( ))

[@codecommerce]

Thank you Alen

[@ShSmith]

Can you cover how to use this method when working with an API? I want to build a simple dashboard to let some of our users certain class shells we have available. We use a name scheme of Faculty_Template & School_Master - I understand how to get this information but how do I store this on my webpage? I think I could just update the repo with a new list of sections after manually downloading them however it would be nice to make this happen in Realtime. Wouldn't be a lot of data less than .5gb for sure.

[@codecommerce]

It’s basically the same (this is why I stored everything in a separate file to simulate the API response). You can use fetch or a tool like axios to make your api call and then set the response inside of a state variable.

[@tomasburian6550]

Good stuff that every beginner should know as searching through data is a vital part of many projects out there. Just to be sure, if I want to search according to various parameters, not just the first name, I'll chain the filter functions like you showed in the Filter Method video?

[@jordiverbeek4917]

i have a question, i want to have my search bar in my header but how do i pass the state from the header to the app.jsx?

[@alvinchristianto-p2d]

how about pagination? if we implement pagination, does it only filter the first 'n' data ?

[@v.i.n.i.t968]

i was thinking about create api for search user and use of map() to display it. You have saved our valuable time. Appriciated !!!

[@sarkaran]

I wonder why after filter I can not use onCLick on filtered items,

[@nicmantzivis8978]

Wow, I wrote so much code to achieve the same result, well done and thank you for this solution 😁

[@aasheesh6001]

Thanks i just forget about filte. thanks bro for the video.

[@ahmedoraiby3059]

thanks so mush . but how make search relate to all columns not just first name ?

[@pnahar0847]

just wanted to ask im on windows and vscode doesn't autoformats code in js when i save the data what do i need to do?

[@srs8074]

You are just awesome 😊😊😊

[@nimethhr9806]

Thank you very much just what i needed

[@codecommerce]

Thank you!

[@respectgmechager8054]

Thanks a lot..u save lot of time ❤❤❤❤..love from India I subscribed u

[@-Sigma111]

thanks, it helped me save more time

[@webdev_am]

Can you make another additional video for this but with “denouncing” technique?

[@moshabbir_hossain]

That's a great video. It's very helpful and easier way for filtering data from an api.

[@swifttechnology3801]

Very nice 👍

[@mohammadhossein94]

hey thanks for the video ! but what if we want't that filter on email and phoneNumber too ? how should we say that ?

[@abdelaliaittalb120]

woooow ! genius very how is the Life with u as a genius ??

[@scalarcoding]

Hi, I wanna ask, what if our search bar is in another functional component? do we need to pass the onchange function to parent component and then drill the keyword props to the table component?

[@scalarcoding]

Thanks I found out the answer

[@LizyDaRealtor]

Wow thank you, made my work super easy !!!

[@shwetasharma-m2w]

Thank you

[@chrisdizzle313]

This is EXACTLY what I need to do!

[@metehansobaci6938]

gen z be like we can get rid of the gender

[@codecommerce]

haha damnit man!!

[@rahulsaroj789]

Thanks for the tutorial, and Could you please let me know how to modify it so that it able to make searches based on other parameters as well.

[@rahulsaroj789]

got it!, for those who have same question, just replace below code: Object.values(item).join('') with item.first_name then final code would be like: .filter((item) => { return search.toLowerCase() === '' ? item : Object.values(item).join('').toLowerCase().includes(search.toLowerCase()); })

[@sidd_shaikh]

Hey great video but what if the data is too large?

[@exploreeewithmegha-om6gb]

can we use date filter like from range to range??

[@blazerdork3497]

Hi Clint, can it also be done by using the react props? PS: another great video! can't wait for the next one :)

[@codecommerce]

Hi Blazer, I kept everything in the App component, but yes!

[@sujaypaul4542]

hmmm..yummy

[@Brendan_M_]

Thank you, this is so much easier than sending to the backend to search. One note, I noticed it didn't work if there is an uppercase letter in the search bar so I made a small change to: "onChange={(e) => setSearch(e.target.value.toLowerCase())}" so it's now completely case insensitive.

[@codecommerce]

Awesome! Great way to do it with a small amount of results :)

[@mediumsofy]

Thank you so much man, I was struggling trying to figure out how to implement this feature in my graduation project and your video made it all clear, you're a great teacher!

[@Peugeot9X8]

Wow literally took me 3 minutes to apply what shown on the video, great job¡

[@anukulghosh6575]

You are awesome, whats your vs code theme name?

[@konatesoumahila2806]

grand merci à vous! +1 abonné😊💯

[@Hachirou_Genji]

thank you so much for this, I'm grateful for you

[@selfmadetool]

Thank you, sir. I was able to incorporate filtering into my project within a few minutes.

[@YARAELMASRY]

Im getting a bootstrap error

[@LuisTal1ercio]

thanks for this video, easy and fast, greetings from Argentina

[@thirumalasettysaisatish1043]

Thanks for the tutorial, Brilliant Video!

[@codecommerce]

Thank you sir!

[@RealParadox85]

EXTREMELY clear and easy to follow video and I am someone who has used React since 2018. Well done, sir.

[@mdtajulislammt4707]

Very thankful video

[@thoinguyen3175]

thanks rất nhiều, rất dễ hiểu

[@mounir101]

Very helpful:) thanks

[@jimmyopot1972]

Thanks a lot, indeed benefited. Nairobi, Kenya

[@vibhashanaranhinda3774]

The most simplest and easy to understand tutorial. Keep making awesome tutorials like this.

[@LeaNahuelMartinez]

Thanks for this info, still util !

[@darkjoyboy04]

Thanks your video made me to understand how filter really works!

[@slblackmamba]

just simple and perfect. thanks

[@codecommerce]

You're welcome!

[@notappi3982]

thanks that was a great little trick i did had an idead how to do it but u made it simpler for me. thanks a lot LOVE from INDIA

[@codecommerce]

Awesome man!

[@sadimridha5753]

Your vedio made my life easy❤

[@redh4y]

Is it possible to do that using useRef rather than useState?

[@ozoindaprince]

we could get rid of the gender 😭

[@МурадДжалалов-л6ц]

Bro I really appreciate what you do. can you make video of shopping cart and redux?

[@codecommerce]

Yes!! Coming soon :)

[@adityashekharsingh2669]

thanks alot broo saved my ass

[@duytien69]

Hey Bro, thanks a lot, I hope bro will release a video about Cart (Commerce) in ReactJS

[@codecommerce]

Lots of content in the pipeline! It just takes a little time. :)

[@anirudhhosur3827]

Thank you so muchhhhhh

[@bibakgh6810]

very good . thank you

[@uniquedivya113]

Really ur great.. i tried with many videos but ur videos awesome man

[@codecommerce]

Thank you my friend!

[@UddhikaIshara]

Thank you very much

[@shoaibrehman1348]

Sir i am first liker of your video. and i also watch every video of yours ... plz create one video on redux-toolkit with async thunk ... Thank you ....

[@codecommerce]

You got it! Thank you sir

[@shoaibrehman1348]

@@codecommerce I will be waiting ....

[@itbeat7899]

this just solved the problem I had for the last 8 months. Thank you so so much! you dont know how much I appreciate this help

[@kevinleon4621]

Thanks man this video was useful!

[@weimardoge]

Great! Thats like and a "subscribe"

[@codecommerce]

Thanks!

[@judoScott]

That was great! Thank you so much

[@mostafaekbal7093]

Thank you so much man, I've learned a lot from this video.

[@ThiagoSilva-jn6ov]

You are amazing

[@mr.pjarts9142]

Thank you ❤❤

[@eliucastillo6976]

just what i was looking for, thank you

[@durotemy8410]

I have a question

[@Luunaquedateluuna]

Oh God, it was so simple 🥲 Thanks!!!

[@waheedulislam7240]

Thank u bro🥰

[@Berlin-v6d]

Very good Explanation! 👍

[@mpowereer6992]

great video, can you make tutorial with live drag and drop with updating index data in firestore?

[@codecommerce]

Great idea, thank you.

[@mohammedadam5711]

Thank you so much