DEV Community

Cover image for React Filters with Pagination

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.
    .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 (
             className={item.type === "red" ? "text-red" : "text- 
             green"} >
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.

You can contact me on -
Instagram -
LinkedIn -
Email -

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> <--

Also check these posts as well

Top comments (4)

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.

shubhamtiwari909 profile image

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

brense profile image
Rense Bakker


Thread Thread
shubhamtiwari909 profile image

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