.filter() over array works only the first time-CodePudding

in react-native, I am trying to add a simple filtering option on the top of my screen. Just like this one.

But the filter works only on the first hit. After the first, the new array resolves always as empty.

Could anyone tell me where/why is this code failing? Thanks a lot!

     import { exercisesList } from '-utils/exercisesList'

     const [items, setItems] = useState(exercisesList)
    
      const handleFilter = (treatment = 'All') => {
        console.log('FILTER-TREATMENTE---->', treatment)
        let filteredList = exercisesList 
      
    
        if (treatment === 'All') {
          setItems(exercisesList)
        } else {
          filteredList = items.filter((item) => item.treatment === treatment)
          console.log('filteredList----->', filteredList)
         
          setItems(filteredList)
        }
      }

CodePudding user response：

I think it is because the second time that the function runs the items has the previous filteted list, not the full list and you are filtering the items array, not exercistsList

CodePudding user response：

I know others answers solve the problem but I think we can expand on the issue a bit just to better understand what went wrong. It was happening because the filtering was being run directly on the state it was supposed to alter so when second run comes its running on previously filtered data that may or may not meet the filtering requirements. Some pseudo code below on how it should have been done

data -> filter(data) -> updateState(filteredData) -> repeat()

const handleFilter = (treatment = 'All') => {
    console.log('FILTER-TREATMENTE---->', treatment);
    let filteredList = [];

    if (treatment === 'All') {
      setItems(exercisesList);
    } else {
      filteredList = exercisesList.filter((item) => item.treatment === treatment);
      console.log('filteredList----->', filteredList);

      setItems(filteredList);
    }
  };