Search Filter in React JS - Filter Through Results

Подписаться 42 тыс.

Просмотров 155 тыс.

50% 1

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/

Опубликовано:

1 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 212

@juanxc7 10 месяцев назад

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

@kattagurunadham9425 17 дней назад

hlo bro iam not getting the searchbar bro

@sebastianlozano7707 11 месяцев назад

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 2 года назад

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

@codecommerce 2 года назад

Thank you dude! Typescript coming soon

@anandgomaskar2210 Год назад

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

@santhoshn9769 Год назад

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

@robbobpirate3678 Год назад

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

@codecommerce Год назад

Thank you!

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

@vimz92 Год назад

Bro, Thank you so much. Subscribed

@codecommerce Год назад

Thanks Vimal!

@josephomotade864 2 года назад

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

@codecommerce 2 года назад

Thank you Joseph!!

@nanakwekuotoo1775 2 года назад

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

@codecommerce 2 года назад

Haha thank you Nana!

@srs8074 9 месяцев назад

You are just awesome 😊😊😊

@the-boss-98 10 месяцев назад

Every video you make is so helpful

@FootballForThePeople 2 года назад

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?

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

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

@swifttechnology3801 Месяц назад

Very nice 👍

@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

@nimethhr9806 Год назад

Thank you very much just what i needed

@codecommerce Год назад

Thank you!

@shwetasharma-m2w 5 месяцев назад

Thank you

@Deqike_Michael2 6 месяцев назад

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

@MuneebUrRehman-fv4qk 8 месяцев назад

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.

@redh4y Год назад

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

@sujaypaul4542 Год назад

hmmm..yummy

@AkyeampongKwekuPrince 4 месяца назад

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

@SyedHazratRazaQuadri 9 месяцев назад

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?

@metehansobaci6938 8 месяцев назад

gen z be like we can get rid of the gender

@codecommerce 8 месяцев назад

haha damnit man!!

@jordiverbeek4917 6 месяцев назад

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 11 месяцев назад

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

@aasheesh6001 Месяц назад

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

@sarkaran Год назад

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

@tomasburian6550 2 года назад

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?

@ahmedoraiby3059 2 месяца назад

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

@pnahar0847 5 месяцев назад

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?

@thoinguyen3175 11 месяцев назад

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

@ShSmith 2 года назад

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 2 года назад

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.

@LizyDaRealtor 2 месяца назад

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 😁

@abdelaliaittalb120 2 месяца назад

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

@chrisdizzle313 4 месяца назад

This is EXACTLY what I need to do!

@exploreeewithmegha-om6gb 5 месяцев назад

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

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

@sidd_shaikh 9 месяцев назад

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

@YARAELMASRY Год назад

Im getting a bootstrap error

@mdtajulislammt4707 Год назад

Very thankful video

@anukulghosh6575 Год назад

You are awesome, whats your vs code theme name?

@mounir101 10 месяцев назад

Very helpful:) thanks

@konatesoumahila2806 11 месяцев назад

grand merci à vous! +1 abonné😊💯

@scalarcoding 11 месяцев назад

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 11 месяцев назад

Thanks I found out the answer

@LeaNahuelMartinez 4 месяца назад

Thanks for this info, still util !

@rahulsaroj789 9 месяцев назад

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 9 месяцев назад

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()); })

@-Sigma111 Год назад

thanks, it helped me save more time

@sadimridha5753 10 месяцев назад

Your vedio made my life easy❤

@respectgmechager8054 Год назад

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

@ozoindaprince Год назад

we could get rid of the gender 😭

@adityashekharsingh2669 11 месяцев назад

thanks alot broo saved my ass

@anirudhhosur3827 Год назад

Thank you so muchhhhhh

@webdev_am Год назад

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

@thirumalasettysaisatish1043 Год назад

Thanks for the tutorial, Brilliant Video!

@codecommerce Год назад

Thank you sir!

@blazerdork3497 2 года назад

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

@codecommerce 2 года назад

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

@slblackmamba 8 месяцев назад

just simple and perfect. thanks

@codecommerce 8 месяцев назад

You're welcome!

@bibakgh6810 Год назад

very good . thank you

@Hachirou_Genji 11 месяцев назад

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

@UddhikaIshara Год назад

Thank you very much

@moshabbir_hossain 3 месяца назад

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

@mr.pjarts9142 9 дней назад

Thank you ❤❤

@ThiagoSilva-jn6ov 3 месяца назад

You are amazing

@durotemy8410 Год назад

I have a question

@Peugeot9X8 7 месяцев назад

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

@mohammadhossein94 Год назад

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

@waheedulislam7240 3 месяца назад

Thank u bro🥰

@mohammedadam5711 Год назад

Thank you so much

@Muxitdin1 3 месяца назад

thanks man!👍

@gauravpise6393 11 месяцев назад

great video sir

@rajverma5051 Год назад

Thanks a lot man !

@bofinannhor3566 Год назад

thanks you sir

@roastingfactory5385 2 месяца назад

Thanks boss

@goss-amer 5 месяцев назад

thank you!!!!!!!

@eboreimeohioleojo7261 Год назад

You are the best

@iwantfrens5804 10 месяцев назад

Great video!

@nirajanmahato4187 7 месяцев назад

it worked 👍

@Luunaquedateluuna 19 дней назад

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

@Sandro-p21 Год назад

Thank you

@hamaomer1825 5 месяцев назад

thank you

@weimardoge Год назад

Great! Thats like and a "subscribe"

@codecommerce Год назад

Thanks!

@tiger7858 Год назад

👌👌👌👌👌🙏🙏🙏

@muhammadluqman1389 Год назад

Great video

@ScottSmyth-rf4bm Год назад

Cool thanks

@mediumsofy 3 месяца назад

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!

@amalnathk7456 Год назад

Thanks mahn🎉

@diyatripathi503 Год назад

Thanxxx man...

@reginaldejike2234 Год назад

Thank you

@MTFights Год назад

nice content

@shekarnerella8637 9 месяцев назад

Hii

@vigneshwaranm2534 Год назад

thanks ...

@abidibnazam4462 11 месяцев назад

Neat!!!!

@selfmadetool 5 месяцев назад

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

@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 :)