ReactJS: How to create a Data Filter App
ReactJS: How to create a Data Filter App
Hello KZread, today we will be creating an application that will filter data for us like in eCommerce applications where we have multiple fields and different types of inputs.
We will look into how to write the filter logic in ReactJS which will have inputs, dates, and dropdowns to get value and filter the data to display.
Github Repository: github.com/gkhan205/react-dat...
#reactjs #reactjsfilter #codewithghazi
-----------------------------------------------------
Blog: www.codewithghazi.com/blog
Twitter: / codewithghazi
Facebook: / codewithghazi
Instagram: / codewithghazi
-----------------------------------------------------
My Work From Home Setup you might be interested in:
Desk: amzn.to/2SEB3j6
Chair: amzn.to/3qzTuC1
Wireless Keyboard: amzn.to/3w17NAE
Wireless Mouse: amzn.to/3x8GmGn
Type C to HDMI Cable: amzn.to/2SCowN7
Monitor: amzn.to/3jprWxL
-----------------------------------------------------
Пікірлер: 42
Hello Ghazi, this video is just what I'm looking for, thank you very much.
@codewithghazi
2 жыл бұрын
Glad it was helpful!
Thanks a lot. it was great
Thank you. It's worked. I have learned something new.
Thank you so much! You saved me!
Thanks, Ghazi, you came in clutch!
@codewithghazi
2 жыл бұрын
I'm glad I was able to help you in some way. :)
Thank you very much. I like you video.
Nice video Bhaiya.
Great Video..everything explained very well..
@codewithghazi
2 жыл бұрын
Thanks. I'm glad you liked it.
Just speechless. Very nice video 👍
@codewithghazi
2 жыл бұрын
Glad you liked it😀
perfect
Good job 👌👍
@codewithghazi
2 жыл бұрын
Thank you! Cheers!😀
I have some doubts while filtering is it corre tht when im filtering by gender and then i search a name it returns global names?
Great video! where can I find the css for this?
is it a combined search/filter?? I mean for example can I search for the name & the gender during a selected period of time at the same time??
@codewithghazi
2 жыл бұрын
Yes it is combined
Nice video ,please add this kind of , real time project examples
@codewithghazi
2 жыл бұрын
Ok sure next time.
@AmitKumar-pq8jg
2 жыл бұрын
@@codewithghazi hello sir
@codewithghazi
2 жыл бұрын
Hello @amit
hi i have done for to date but its not working for range like 21-05-2020 to 21-05-2021 range can you please help me here?
@codewithghazi
2 жыл бұрын
Sure I would help. Could you please add your code to GitHub, it will be easy to take it forward.
Hello mate, if i add multiple dropdrop filters, can i make it find the results that match all the dropdown filter selections?
@codewithghazi
Жыл бұрын
Yes you can make it work. There are two options majorly these kind of filters are handled over backend in DB query. If you want to make that work on UI, you can modify the filter function to work with multiple filter conditions.
@ZettoChannel
Жыл бұрын
@@codewithghazi Hello, i managed to do it on the backend but i have issues creating the options for the drop down list
Hello, i like your job, but why you didn't add (to) for the second part of date filter ??
@codewithghazi
2 жыл бұрын
I thought to give that as task to viewers so that can do the practicing too.
I have some doubts while filtering if no data found how to manage that
@codewithghazi
2 жыл бұрын
You could check if the returned array length is zero then you could show some message like "No data found".
nice video , please could u finish "to" ! thank u
i have done for to date but its not working for range. Can you help?
@codewithghazi
Жыл бұрын
Yes, you can create a GitHub repo for it. I'll update and raise a pr
An alternative way to handle input: const [formInputs, setFormInputs] = useState({ name: "", email: "", gender: "", startDate: "", endDate: "", }); const handleInputChange = (e) => { setFormInputs({ ...formInputs, [e.target.name]: e.target.value }); onNameFilter(e.target.value); };
@codewithghazi
Жыл бұрын
Yes this is also a good way. Thanks for sharing. 👍
Why did you have to in the end use External lib like dayjs for date filters. Is the logic for dates so difficult that there is no help for it on the internet. All companies don't allow ext lib bro.
@codewithghazi
2 жыл бұрын
Hi, It is not about the difficulty, I have used dayjs library to have the implementation short and simple rather than to go deep in writing date functions. The video was about the give the idea on Filtering data with multiple filter criteria not on date functions or libraries. Yes, I understand there are companies don't allow the use external libraries, but as the video was to give the idea on filtering, there might be some different use cases in the filter as well. That is why i didn't write date functions to have comparison with dates.
Hi bhaiya i am from India and you are really good creator, can you please created a full series in full stack that no one created in KZread. And I find you on Instagram but it seems your profile not found...
@codewithghazi
2 жыл бұрын
Hi Bhojak, I'm glad you liked the content. I'll try to make some full stack series. My Instagram account is having some issues. I'll maybe create a new one with some new contents.