Question 34083 in React native Question posted in
The official React Native documentation can be found here.

.filter() over array works only the first time – React native

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)
        }
      }
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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);
    }
  };
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search