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!

[@marcelooliveira5034]

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

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

[@the-boss-98]

Every video you make is so helpful

[@vibhashanaranhinda3774]

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

[@josephomotade864]

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

[@codecommerce]

Thank you Joseph!!

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

[@Peugeot9X8]

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

[@kisshore3853]

Clean & Clear mate, thanks ❤

[@monique2839]

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

[@codecommerce]

Thank you Monique :)

[@mostafaekbal7093]

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

[@darkjoyboy04]

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

[@FootballForThePeople]

Best Coding Tutorial Voice I have encountered so far.

[@codecommerce]

Thank you dude

[@user-sh1hr6si3j]

Very good Explanation! 👍

[@nicmantzivis8978]

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

[@user-zg3oh2dc2m]

Thank you very much for this video! 💯

[@eliucastillo6976]

just what i was looking for, thank you

[@nanakwekuotoo1775]

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

[@codecommerce]

Haha thank you Nana!

[@LuisTal1ercio]

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

[@bakinloye2398]

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

[@codecommerce]

Glad it was helpful!

[@Hachirou_Genji]

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

[@judoScott]

That was great! Thank you so much

[@TheVedicWarrior]

Thank man it was so helpful and easy ❤

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

[@leonelpaez9358]

Great work mate, too easy!

[@codecommerce]

Thanks leonel!

[@robbobpirate3678]

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

[@codecommerce]

Thank you!

[@kevinleon4621]

Thanks man this video was useful!

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

[@thrainii7324]

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

[@codecommerce]

Glad it helped! 🙏

[@emirdior]

Brilliant video, thank you!

[@anoopk.s1255]

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

[@codecommerce]

Thank you- much appreciated!

[@sadimridha5753]

Your vedio made my life easy❤

[@user-dv1sv8ev5b]

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

[@user-ml6he2yr3y]

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

[@thirumalasettysaisatish1043]

Thanks for the tutorial, Brilliant Video!

[@codecommerce]

Thank you sir!

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

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

[@jimmyopot1972]

Thanks a lot, indeed benefited. Nairobi, Kenya

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

[@slblackmamba]

just simple and perfect. thanks

[@codecommerce]

You're welcome!

[@arnabsarkar5245]

One of the most easiest video I have ever seen

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

[@chrisdizzle313]

This is EXACTLY what I need to do!

[@uniquedivya113]

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

[@codecommerce]

Thank you my friend!

[@respectgmechager8054]

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

[@nimethhr9806]

Thank you very much just what i needed

[@codecommerce]

Thank you!

[@sarkaran]

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

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

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

[@lalagisaa]

Awesome as always 🔥🔥

[@codecommerce]

Thank you Christian! 🔥

[@Miles09]

Great video, thanks.

[@santhoshn9769]

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

[@iwantfrens5804]

Great video!

[@-Sigma111]

thanks, it helped me save more time

[@rajverma5051]

Thanks a lot man !

[@vimz92]

Bro, Thank you so much. Subscribed

[@codecommerce]

Thanks Vimal!

[@sulthanathallah4809]

it's so helpful, thanks man

[@codecommerce]

Thank you!

[@LeaNahuelMartinez]

Thanks for this info, still util !

[@redh4y]

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

[@EmersonDiazG]

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

[@codecommerce]

Thank you Emerson!

[@anandgomaskar2210]

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

[@mounir101]

Very helpful:) thanks

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

[@mohammadDeveloper2431]

Awesome sir very nice explain

[@arush6778]

Very helpful tutorial. Many thanks

[@codecommerce]

Thanks man!

[@totitoti7863]

Really helpful for my project. Thanks😁😁

[@codecommerce]

Thanks dude!

[@henrymunoz2035]

Thank you so much for the great content .

[@codecommerce]

Thank you Henry! 🙏

[@mdtajulislammt4707]

Very thankful video

[@georgitodev7865]

Perfect job

[@MorrisonMac]

Life saver, thank you

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

[@user-qs9gd6ov3p]

Thank you

[@srs8074]

You are just awesome 😊😊😊

[@mohammedadam5711]

Thank you so much

[@mohammadhossein94]

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

[@eladbar1579]

Awesome content bro! 🔥

[@codecommerce]

Thank you dude!

[@UddhikaIshara]

Thank you very much

[@nihalmp4559]

Thanks bro!

[@itsir3211]

It was brilliant bro thanks a lot ❤

[@codecommerce]

Thank you dude! 💪

[@exploreeewithus-om6gb]

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

[@bibakgh6810]

very good . thank you

[@gauravpise6393]

great video sir

[@muhammadluqman1389]

Great video

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

[@charulatha]

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

[@amalnathk7456]

Thanks mahn🎉

[@anirudhhosur3827]

Thank you so muchhhhhh

[@redh4y]

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

[@Deqike_Michael2]

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

[@goss-amer]

thank you!!!!!!!

[@konatesoumahila2806]

grand merci à vous! +1 abonné😊💯

[@hamaomer1825]

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!

[@diyatripathi503]

Thanxxx man...

[@ScottSmyth-rf4bm]

Cool thanks

[@MTFights]

nice content

[@user-fu9wl6yn2d]

Thank You very much Sir

[@codecommerce]

Thank you!