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>
        );
 })}

• 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 - [e-mail]

^^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

Comments

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

[Shubham Tiwari]

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

[Rense Bakker]

Yep

[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