What is the correct way to toggling a filter on a json array? - html

Question

I have an array of json objects, and I want to be able to show either all of them, or remove some of them by filtering them by a key value.
I achieved this by creating a new constant:
const filtered = data.filter((item) => item.highVariance === false);
And a different constant:
const showHighVar = isHighVar ? data : filtered;
And then I have a checkbox that lets me toggle the shotHighVar constant in:
input type="checkbox" onChange={() => setHighVar(!isHighVar)}/>
In order to map it later in code:
{sorted(showHighVar).slice(0, 25 * pageIndex).map((x) => (...))}
But it seems to me like there should be a better way of doing this, but I can't figure it out.

Answer 1

There is nothing wrong with the way you are doing it. the one thing that i would change is that instead of creating filtered variable all the time just filter the data when isHighVar is false. So your code should look something like this -
const showHighVar = isHighVar ? data : data.filter((item) => item.highVariance === false);
{sorted(showHighVar).slice(0, 25 * pageIndex).map((x) => ( .....))}
Or when you are running the map function after sorting and slicing. just add a if statement in map function and check if isHighVar is false then return null else do whatever you are doing.
eg.
{sorted(data).slice(0, 25 * pageIndex).map((x) => {
if(isHighVar===false && x.highVariance!==false){
return null;
}
....
})}