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

  • @AndersonManosalva
    @AndersonManosalva2 жыл бұрын

    Hello Ghazi, this video is just what I'm looking for, thank you very much.

  • @codewithghazi

    @codewithghazi

    2 жыл бұрын

    Glad it was helpful!

  • @MahboobehAlizadeh-nc4pk
    @MahboobehAlizadeh-nc4pk Жыл бұрын

    Thanks a lot. it was great

  • @_mr_hasib
    @_mr_hasib2 жыл бұрын

    Thank you. It's worked. I have learned something new.

  • @idevbrandon
    @idevbrandon2 жыл бұрын

    Thank you so much! You saved me!

  • @bluebassboy22
    @bluebassboy222 жыл бұрын

    Thanks, Ghazi, you came in clutch!

  • @codewithghazi

    @codewithghazi

    2 жыл бұрын

    I'm glad I was able to help you in some way. :)

  • @tamaraevpraksina6945
    @tamaraevpraksina69452 жыл бұрын

    Thank you very much. I like you video.

  • @prashantkumar2963
    @prashantkumar29632 жыл бұрын

    Nice video Bhaiya.

  • @yogeshjadhav5468
    @yogeshjadhav54682 жыл бұрын

    Great Video..everything explained very well..

  • @codewithghazi

    @codewithghazi

    2 жыл бұрын

    Thanks. I'm glad you liked it.

  • @topamazondeals2763
    @topamazondeals27632 жыл бұрын

    Just speechless. Very nice video 👍

  • @codewithghazi

    @codewithghazi

    2 жыл бұрын

    Glad you liked it😀

  • @hussenelswaf9660
    @hussenelswaf9660 Жыл бұрын

    perfect

  • @SS_Collections1992
    @SS_Collections19922 жыл бұрын

    Good job 👌👍

  • @codewithghazi

    @codewithghazi

    2 жыл бұрын

    Thank you! Cheers!😀

  • @christianvaldivia9217
    @christianvaldivia92172 жыл бұрын

    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?

  • @biancamagali100
    @biancamagali100 Жыл бұрын

    Great video! where can I find the css for this?

  • @serious0me
    @serious0me2 жыл бұрын

    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

    @codewithghazi

    2 жыл бұрын

    Yes it is combined

  • @dileepbannikatti7900
    @dileepbannikatti79002 жыл бұрын

    Nice video ,please add this kind of , real time project examples

  • @codewithghazi

    @codewithghazi

    2 жыл бұрын

    Ok sure next time.

  • @AmitKumar-pq8jg

    @AmitKumar-pq8jg

    2 жыл бұрын

    @@codewithghazi hello sir

  • @codewithghazi

    @codewithghazi

    2 жыл бұрын

    Hello @amit

  • @dileepbannikatti7900
    @dileepbannikatti79002 жыл бұрын

    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

    @codewithghazi

    2 жыл бұрын

    Sure I would help. Could you please add your code to GitHub, it will be easy to take it forward.

  • @ZettoChannel
    @ZettoChannel Жыл бұрын

    Hello mate, if i add multiple dropdrop filters, can i make it find the results that match all the dropdown filter selections?

  • @codewithghazi

    @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

    @ZettoChannel

    Жыл бұрын

    @@codewithghazi Hello, i managed to do it on the backend but i have issues creating the options for the drop down list

  • @mohamedboularas6480
    @mohamedboularas64802 жыл бұрын

    Hello, i like your job, but why you didn't add (to) for the second part of date filter ??

  • @codewithghazi

    @codewithghazi

    2 жыл бұрын

    I thought to give that as task to viewers so that can do the practicing too.

  • @bhojakrahul5880
    @bhojakrahul58802 жыл бұрын

    I have some doubts while filtering if no data found how to manage that

  • @codewithghazi

    @codewithghazi

    2 жыл бұрын

    You could check if the returned array length is zero then you could show some message like "No data found".

  • @hadilfares7317
    @hadilfares73172 жыл бұрын

    nice video , please could u finish "to" ! thank u

  • @shreyanipanikar5515
    @shreyanipanikar5515 Жыл бұрын

    i have done for to date but its not working for range. Can you help?

  • @codewithghazi

    @codewithghazi

    Жыл бұрын

    Yes, you can create a GitHub repo for it. I'll update and raise a pr

  • @ekanemeno4565
    @ekanemeno4565 Жыл бұрын

    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

    @codewithghazi

    Жыл бұрын

    Yes this is also a good way. Thanks for sharing. 👍

  • @roshanstepit
    @roshanstepit2 жыл бұрын

    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

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

  • @bhojakrahul5880
    @bhojakrahul58802 жыл бұрын

    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

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