Refresh FlatList React - react-native

Question

the flatList after deleting work but not displayed on Screen items does't change
const App = () => {
const data = [
{ id: 1, text: "item One" },
{ id: 2, text: "item Two" },
{ id: 3, text: "item Three" },
{ id: 4, text: "item Four" },
];
const [state, setState] = useState(data);
const onPressItem = (id) => {
// code de delete item
const data = state;
alert(id);
const filterrArray = data.filter((val, i) => {
if (val.id !== id) {
return val;
}
});
console.log("filteerArray " , filterrArray)
setState( filterrArray)
};
const renderItem = ({ item }) => {
return (
<TouchableOpacity style={styles.item}>
<Text style={styles.text}>{item.text}</Text>
<Button title="Supprimer" onPress={() => onPressItem(item.id)} />
</TouchableOpacity>
);
};
const handleCheck = () => {
console.log('__________________________')
console.log(state)
}
return (
<View style={{ flex: 1, padding: 0, marginTop: "10%" }}>
<SafeAreaView>
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={renderItem}
/>
</SafeAreaView>
<Button
title = "Verifier state"
onPress={handleCheck}
/>
</View>
);
};
i try the console log every time before the deleting and after the deleting is work fine but doest change on Screen or refresh automatically i dont know

Answer 1

not sure if I got your question right but if you want to update your flatlist, you need to pass state to data.
data={state}