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!
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!
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?
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( )?
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?
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.
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?
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?
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()); })
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( ))
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?
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.
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!
my bro here just accomplished what I've been struggling with for a whole month in 8 minutes what a pro
hlo bro iam not getting the searchbar bro
EXTREMELY clear and easy to follow video and I am someone who has used React since 2018. Well done, sir.
You are behind my success with react and being a web developer.
Thanks again bro.
Thank you Joseph!!
thank you so much for this! really helpful and straightforward. exactly what I needed for a project!
Hey Colin I'm grateful for your content. Keeps improving my js skills. Please a typescript tutorial will come in handy
Thank you dude! Typescript coming soon
I don't know how you're being slept on.
You're my best react teacher on here💯
Haha thank you Nana!
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!
Best Coding Tutorial Voice I have encountered so far.
Thank you dude
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
i was thinking about create api for search user and use of map() to display it. You have saved our valuable time. Appriciated !!!
I Check so many videos but don't understand.this video so comfortable and understand ❤ thanku
Thank you- much appreciated!
The most simplest and easy to understand tutorial. Keep making awesome tutorials like this.
that .includes() is a game changer thanks for the knowledge
Thank you!
Every video you make is so helpful
Wow literally took me 3 minutes to apply what shown on the video, great job¡
I used this search method while developing my project, it was much better, you are great
Glad it helped! 🙏
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?
I feel like very comfortable in search filter. after watching this
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( )?
Thank you, sir. I was able to incorporate filtering into my project within a few minutes.
Wow, I wrote so much code to achieve the same result, well done and thank you for this solution 😁
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?
That's a great video. It's very helpful and easier way for filtering data from an api.
One of the most easiest video I have ever seen
Thank you very much for this concise and straightforward tutorial. its so easy to grasp
Glad it was helpful!
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.
Awesome! Great way to do it with a small amount of results :)
gr8 video, but how about last name, email, phone searching? is it possible to search simultaneously whenever I typed once?
Thanks your video made me to understand how filter really works!
Great work mate, too easy!
Thanks leonel!
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
Awesome man!
thanks for this video, easy and fast,
greetings from Argentina
Very succinct video! As always I enjoy your content. I'm excited for the typescript video!
Thank you Monique :)
Thanks for the tutorial, Brilliant Video!
Thank you sir!
Clean & Clear mate, thanks ❤
Wtf, I Knew Everything, But I couldn't Implement, That's Really Easy,I appreciate Your Work ,🎉
.......Sorry For My Horrible English
just what i was looking for, thank you
Really ur great.. i tried with many videos but ur videos awesome man
Thank you my friend!
just simple and perfect. thanks
You're welcome!
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?
Wow thank you, made my work super easy !!!
This is EXACTLY what I need to do!
Hi Clint, can it also be done by using the react props?
PS: another great video! can't wait for the next one :)
Hi Blazer, I kept everything in the App component, but yes!
It's much easier than I thought. I thought making a search filter would be complex. Thanks for sharing ❤.
Debunking the complex stuff!! Thank you Shahid!
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?
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.
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());
})
Very good Explanation! 👍
Can you make another additional video for this but with “denouncing” technique?
Thanks a lot, indeed benefited. Nairobi, Kenya
Hey great video but what if the data is too large?
Nice video. Mockaroo seems to be a great tool, gonna make my next project using it! Thanks!
I use it all the time!
Awesome as always 🔥🔥
Thank you Christian! 🔥
can we use date filter like from range to range??
thanks so mush . but how make search relate to all columns not just first name ?
Thank you very much just what i needed
Thank you!
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( ))
Thank you Alen
Thanks i just forget about filte. thanks bro for the video.
Thank you so much man, I've learned a lot from this video.
Brilliant video, thank you!
How did you convert the json data to normal object data inside the Vs code? struggling with that for days
Very nice 👍
thank you so much for this, I'm grateful for you
how about pagination? if we implement pagination, does it only filter the first 'n' data ?
Your vedio made my life easy❤
Thank you very much, it helped me a lot for a requirement
Thank you Emerson!
That was great! Thank you so much
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?
hey thanks for the video !
but what if we want't that filter on email and phoneNumber too ? how should we say that ?
Awesome content bro! 🔥
Thank you dude!
I wonder why after filter I can not use onCLick on filtered items,
Oh God, it was so simple 🥲 Thanks!!!
I searched a search filter video for so long today only i got an awesome sause video man ,thanks for that 👏🔥🔥🔥
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?
Thats nice bro. I am working on twitch clone and learning new new concepts
That’s what it’s all about!
Thanks a lot..u save lot of time ❤❤❤❤..love from India
I subscribed u
Thank man it was so helpful and easy ❤
Bro, Thank you so much. Subscribed
Thanks Vimal!
Very helpful tutorial. Many thanks
Thanks man!
it's so helpful, thanks man
Thank you!
How can I have the same result considering that my search input is a separated component?
Really helpful for my project. Thanks😁😁
Thanks dude!
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?
Thanks for this info, still util !
You are awesome, whats your vs code theme name?
Is it possible to do that using useRef rather than useState?
Thank you so much for the great content .
Thank you Henry! 🙏
thanks, it helped me save more time
woooow ! genius very how is the Life with u as a genius ??
Awesome sir very nice explain
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?
Thanks I found out the answer
Great video!
Great video, thanks.
Thanks a lot man !
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.
Life saver, thank you
You are just awesome 😊😊😊
thanku so much upload this vidoe it's really hlep me
It was brilliant bro thanks a lot ❤
Thank you dude! 💪
thanks man!👍
Nice content dude, but how can I display a error text if no search found?
You could check for the results and if they are null or 0 then render some text. :)
@@codecommerce Thanks bro, should I put that inside the filter method?