DEV Community

Cover image for React Filters with Pagination
Shubham Tiwari
Shubham Tiwari

Posted on • Updated on

React Filters with Pagination

Hello Everyone today i will discuss how you can create filter with different form elements like checkbox,input,select and slider.
I will provide the entire code through codesandbox and Explain the main points here.

Let's get started...

Main Points About the Component

  • Firstly i created a form with 4 elements input type of number, a checkbox, a select input and a slider range from 100-1000 with steps of 100.
  • Then i created 4 states for these inputs and attached the event listener to all these inputs to change the state of the filters.
  • Input, checkbox and select has an "onChange" event listener and slider has a "onInput" event listener to change the state on every slide.
  • For the data, i have created an array of object with 3 properties id for the "key" attribute in map function, type for the color value either green or red number, value which is the value used to display the number using map.
  • To apply the filters, i have chained the filter method with map method so that it will apply all the filters together.
{
 dummyData
    .filter((item) => item.value > value)
    .filter((item) => item.value > higherValue)
    .filter((item) => item.value > Number(search))
    .filter((item) => {
       if (colorChecker === "") return item;
          return item.type === colorChecker;
       })
    .map((item) => {
         return (
           <div
             key={item.id}
             className={item.type === "red" ? "text-red" : "text- 
             green"} >
              <p>{item.value}</p>
          </div>
        );
 })}
Enter fullscreen mode Exit fullscreen mode
  • There is a reset filter button which will reset all the filters applied.
  • For the styling part you can check the CSS file its not a complex styling, just a simple one.

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Top comments (4)

Collapse
 
brense profile image
Rense Bakker

You don't want to do too much array manipulation during rendering though. Especially if the array can get fairly large, having multiple filters can be costly. Best practice is to do array filtering inside useMemo and then map over the results of that.

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

You mean the approach is right just have to wrap it inside the useMemo?

Collapse
 
brense profile image
Rense Bakker

Yep

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari

Can you also point out the place where i have to useMemo , i checked it's use but confused about my Code where to put it exactly