I can't remove items from FlatList by useState hook

Question

I am trying to remove items in FlatList by clicking on each, But it doesn't work for me, when i click on each item nothing happen and i don't get any error. How can i fix this?

This is my code: (I removed unnecessary codes and styles)

const FoodList = () => {


  const data=  [

        { text: 'test' },
        { image: 'https://via.placeholder.com/200x100' },
        { text: 'test' },
        { text: 'test' },
        { text: 'test' },
        { text: 'test' },
        { text: 'test' },
        { text: 'test' },
        { text: 'test' },

    ]




    let [itemState, setitemState] = useState(data);




    return (


        <View>
            <FlatList
                data={data}
                keyExtractor={(item, index)=>index}
                renderItem={({ item }) => (
                    <TouchableOpacity>

                <View>
                        <Text>{item.text}</Text>
                        <Image source={{ uri: item.image}}
                        />
                    </View>
                    <Icon  
                 onPress={(index)=>setitemState(itemState=itemState.filter(item=>item.index!==index))} />
                    </TouchableOpacity>
                )}
 />
 </View>
    )}

Answer 1

Firstly, as mentioned by @Hamza Khattabi, you will need to use itemState in the data prop to actually use the updated state, otherwise there is no point of using setitemState , which modifies only the itemState state.

Secondly, I don't think item.index will return anything at all, and I'm pretty confident that the onPress={(index) => {...}} in your Icon element is not returning any index either. You will have the use the index from the renderItem prop , as mentioned in the docs at this link .

Once you account for those changes, you can then simply filter out the itemState state to remove the element at the index. There are many different ways to remove the element at an index, but here is a possible solution:

<FlatList
  data={itemState} // Note the use of itemState
  keyExtractor={(item, index) => index}
  renderItem={({ item, index }) => ( // Note the use of index
    <TouchableOpacity>
      <View>
        <Text>{item.text}</Text>
        <Image source={{ uri: item.image }} />
      </View>
      <Icon
        onPress={() => { // Note that here you can use any function to remove the element at index from the itemState list
          let _itemState = itemState.filter(
            (_item, _index) => _index !== index
          );
          setitemState(_itemState);
        }}
      />
    </TouchableOpacity>
  )}
/>

Let me know if this helps you by commenting below.

Answer 2

Replace data variable in the data attributes by your state

const FoodList = () => {


    ...


    let [itemState, setitemState] = useState(data);




    return (


        <View>
            <FlatList
                data={itemState}
                keyExtractor={(item, index)=>index}
                renderItem={({ item }) => (
                 ...
 </View>
    )}