Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Native - Flatlist skip item in renderItem

$
0
0

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>);

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>