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.buymeacoffee.com/clintbriley
Instagram 💪
/ fireclint
Github Repo
github.com/fireclint/filter-c...
Mock Data
www.mockaroo.com/

[@juanxc7]

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

[@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!

[@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

[@marcelooliveira5034]

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

[@RealParadox85]

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

[@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!

[@the-boss-98]

Every video you make is so helpful

[@josephomotade864]

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

[@codecommerce]

Thank you Joseph!!

[@FootballForThePeople]

Best Coding Tutorial Voice I have encountered so far.

[@codecommerce]

Thank you dude

[@monique2839]

Very succinct video! As always I enjoy your content. I'm excited for the typescript video!

[@codecommerce]

Thank you Monique :)

[@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

[@selfmadetool]

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

[@kisshore3853]

Clean & Clear mate, thanks ❤

[@nanakwekuotoo1775]

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

[@codecommerce]

Haha thank you Nana!

[@vibhashanaranhinda3774]

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

[@Peugeot9X8]

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

[@mostafaekbal7093]

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

[@pcliper9603]

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

[@darkjoyboy04]

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

[@robbobpirate3678]

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

[@codecommerce]

Thank you!

[@LizyDaRealtor]

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

[@nicmantzivis8978]

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

[@bakinloye2398]

Thank you very much for this concise and straightforward tutorial. its so easy to grasp

[@codecommerce]

Glad it was helpful!

[@eliucastillo6976]

just what i was looking for, thank you

[@leonelpaez9358]

Great work mate, too easy!

[@codecommerce]

Thanks leonel!

[@anoopk.s1255]

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

[@codecommerce]

Thank you- much appreciated!

[@thrainii7324]

I used this search method while developing my project, it was much better, you are great

[@codecommerce]

Glad it helped! 🙏

[@LuisTal1ercio]

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

[@TheVedicWarrior]

Thank man it was so helpful and easy ❤

[@emirdior]

Brilliant video, thank you!

[@chrisdizzle313]

This is EXACTLY what I need to do!

[@arnabsarkar5245]

One of the most easiest video I have ever seen

[@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!

[@kevinleon4621]

Thanks man this video was useful!

[@user-sh1hr6si3j]

Very good Explanation! 👍

[@thirumalasettysaisatish1043]

Thanks for the tutorial, Brilliant Video!

[@codecommerce]

Thank you sir!

[@slblackmamba]

just simple and perfect. thanks

[@codecommerce]

You're welcome!

[@judoScott]

That was great! Thank you so much

[@santhoshn9769]

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

[@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!

[@uniquedivya113]

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

[@codecommerce]

Thank you my friend!

[@jimmyopot1972]

Thanks a lot, indeed benefited. Nairobi, Kenya

[@lalagisaa]

Awesome as always 🔥🔥

[@codecommerce]

Thank you Christian! 🔥

[@Hachirou_Genji]

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

[@EmersonDiazG]

Thank you very much, it helped me a lot for a requirement

[@codecommerce]

Thank you Emerson!

[@rajverma5051]

Thanks a lot man !

[@nimethhr9806]

Thank you very much just what i needed

[@codecommerce]

Thank you!

[@LeaNahuelMartinez]

Thanks for this info, still util !

[@iwantfrens5804]

Great video!

[@-Sigma111]

thanks, it helped me save more time

[@sadimridha5753]

Your vedio made my life easy❤

[@mounir101]

Very helpful:) thanks

[@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!

[@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?

[@sulthanathallah4809]

it's so helpful, thanks man

[@codecommerce]

Thank you!

[@henrymunoz2035]

Thank you so much for the great content .

[@codecommerce]

Thank you Henry! 🙏

[@arush6778]

Very helpful tutorial. Many thanks

[@codecommerce]

Thanks man!

[@Miles09]

Great video, thanks.

[@MorrisonMac]

Life saver, thank you

[@respectgmechager8054]

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

[@vimz92]

Bro, Thank you so much. Subscribed

[@codecommerce]

Thanks Vimal!

[@eladbar1579]

Awesome content bro! 🔥

[@codecommerce]

Thank you dude!

[@totitoti7863]

Really helpful for my project. Thanks😁😁

[@codecommerce]

Thanks dude!

[@anandgomaskar2210]

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

[@Muxitdin1]

thanks man!👍

[@itsir3211]

It was brilliant bro thanks a lot ❤

[@codecommerce]

Thank you dude! 💪

[@mdtajulislammt4707]

Very thankful video

[@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?

[@georgitodev7865]

Perfect job

[@mohammadDeveloper2431]

Awesome sir very nice explain

[@bibakgh6810]

very good . thank you

[@srs8074]

You are just awesome 😊😊😊

[@mohammedadam5711]

Thank you so much

[@UddhikaIshara]

Thank you very much

[@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( )?

[@charulatha]

I searched a search filter video for so long today only i got an awesome sause video man ,thanks for that 👏🔥🔥🔥

[@gauravpise6393]

great video sir

[@anirudhhosur3827]

Thank you so muchhhhhh

[@amalnathk7456]

Thanks mahn🎉

[@konatesoumahila2806]

grand merci à vous! +1 abonné😊💯

[@muhammadluqman1389]

Great video

[@nihalmp4559]

Thanks bro!

[@user-qs9gd6ov3p]

Thank you

[@user-fu9wl6yn2d]

Thank You very much Sir

[@codecommerce]

Thank you!

[@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!

[@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?

[@analistadesistemas]

Excellent.

[@codecommerce]

Thank you!

[@goss-amer]

thank you!!!!!!!

[@waheedulislam7240]

Thank u bro🥰

[@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?

[@abhinavdhama3014]

Thats nice bro. I am working on twitch clone and learning new new concepts

[@codecommerce]

That’s what it’s all about!

[@sajithnishantha5242]

great!!

[@diyatripathi503]

Thanxxx man...

[@abdelaliaittalb120]

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

[@Sandro-p21]

Thank you

[@ScottSmyth-rf4bm]

Cool thanks

[@thoinguyen3175]

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

[@bofinannhor3566]

thanks you sir

[@hamaomer1825]

thank you

[@happyyaar3157]

amazing