I am using flatlist to display a list of items retrieved from async storage. I would like to remove an item from the list which effectively removes the item from the async storage aswell. I am able to remove the item from the list but it usually causes an error as the flatlist cant render a null item.
I believe the Error is associated with my keyExtractor as when the item is removed from the async storage, it cant render a null item. Is there a solution to this?
ItemArray consists of an id and product.
Code:
const [ItemArray, setItemsArray] = useState([]);const removeItem = async (ID) => { await AsyncStorage.removeItem(ID);};const getItem = async (x) => { const item = JSON.parse(await AsyncStorage.getItem(x)); return item};const getAllItems = async () => { let temp = []; temp = await AsyncStorage.getAllKeys(); const tempItems = []; for (let i = 0; i < temp.length; i++) { tempItems.push(await getItem(temp[i])); } setItemsArray(tempItems);};useEffect(() => { getAllItems(); }, [ItemArray]); const renderItem = ({ item }) => { return (<View><Text> Item ID: {item.id} </Text><Text> Product: {item.product} </Text><Button title = "Delete Item" onPress = {clearRoute(item.id)} /></View> ); }; return (<View><FlatList data={itemsArray} renderItem={renderItem} keyExtractor={(item) => item.id} /></View>);