I select some options, column, comparison and value, these options are applied to the list, like a filter, but when I remove one of those filters, the list was supposed to go back to its initial state, or to the state that the last filter was in, for example if I have two filters and exclude one

  const [data, setData] = useState([]); // array of items
  const [dataClone, setDataClone] = useState([]);

// onClick this function is called and set a filter on a list ( column, comparison and value )
function myFilter() {

  let dataFiltered = [...data];
    dataFiltered = dataFiltered.filter((item) => {
      if (comparison === 'greather than') {
        return Number(item[column]) > Number(value);
      }
      if (comparison === 'less than') {
        return Number(item[column]) < Number(value);
      }
      if (comparison === 'equals to') {
        return Number(item[column]) === Number(value);
      }
      return null;
    });
    setDataClone(dataFiltered);

}

// this function remove the filter, by removing the filter, the list will go back to how it was before it was filtered, but the other filters must continue to take effect

const removeFilter = (e) => {
    setfilterAndDelete([...filterAndDelete
      .filter((col) => col !== e)]);

    // here i need to get previous deleted items when remove item from filter
  };

// here i can delete all items
function removeAllFilter() {
    setfilterAndDelete([]);
    setNewTest([...data]);
  }

I don't know if it's clear what I want to do, but if someone could give some ideas or something like that, I will be very grateful.

CodePudding user response：

I think the basic issue with the code is that the filter callback returns null by default, which is a falsey value and will filter all values from an array.

It's not clear where comparison and value are declared, but it's generally considered anti-pattern to store derived state in React state. In this case the filtered dataClone state is what is considered derived state. What this means is that you can derive the dataClone value using the data state and the column, comparison, and value values.

The "derived" filtered data should just be filtered inline, this way only the minimal parts are stored in any React state.

Example:

Filter the data inline. In the filter function if there are valid value and item[column] values then return the result of the comparison, otherwise return true to include the value (i.e. don't filter it out).

...
{data
  .filter((item) => {
    const numberValue = Number(value);

    if (!Number.isNaN(numberValue) && item[column]) {
      const itemValue = Number(item[column]);

      switch(comparison) {
        case 'greater than':
          return itemValue > numberValue;

        case 'less than':
          return itemValue < numberValue;

        case 'equals to':
          return itemValue === numberValue;

        default:
          return true;
      }
    }
    return true;
  })
  .map(item => (
    ... JSX ...
  ))
}
...