React Native FlatList component is not rendering my array

Question

So, I am trying to make an app using react-native and i need a list, i am using FlatList. It seems like the problem is in the saving when i use console.log() (I save and retrieve in different files(screens), could that be the problem?).I am getting my array from async storage:

try {
  if ((await AsyncStorage.getItem("DA")) !== null) {
    DUES = JSON.parse(await AsyncStorage.getItem("DA"));
    Works = JSON.parse(await AsyncStorage.getItem("WA"));
    await AsyncStorage.removeItem("DA");
    await AsyncStorage.removeItem("WA");
  }
  if ((await AsyncStorage.getItem("DUES")) !== null) {
    DUES.push(await AsyncStorage.getItem("DUES"));
    Works.push(await AsyncStorage.getItem("Info"));
    await AsyncStorage.removeItem("DUES");
    await AsyncStorage.removeItem("Info");
  }
  await AsyncStorage.setItem("DA", JSON.stringify(DUES));
  await AsyncStorage.setItem("WA", JSON.stringify(Works));
} catch (err) {
  console.log(err);
}

And i need to display that on the list, but nothing renders. List code:

<FlatList>
      data={Works}
      renderItem=
      {() => {
        <Card>
          <Text>{Works[i]}</Text>
          <Text>Due: {DUES[i]}</Text>
        </Card>;
        i++;
      }}
</FlatList>

Save script:

      onPress={async () => {
        try {
          await AsyncStorage.multiSet([
            ["DUES", D],
            ["Info", Title],
          ]);
          console.log("DONE2");
          Alert.alert("Saved!");
        } catch (err) {
          console.log(err);
        }
      }}

It might be because i am missing the "key", but idk. How should i fix this?, and make it render the list. Is there a better way to do this?

Answer 1

That's because you are not returning the elements that you need to print out in your renderItem method of FlatList component. Instead try this:

<FlatList>
      data={Works}
      renderItem=
      {({ item, index }) => {
        return (
          <Card>
            <Text>{item}</Text>
            <Text>Due: {DUES[index]}</Text>
          </Card>
        );
      }}
</FlatList>

Answer 2

You should do this instead:

try {
  const [da, work] = await Promise.all([
    AsyncStorage.getItem("DA"),
    AsyncStorage.getItem("WA")
  ]);

  if (da !== null) {
    DUES = JSON.parse(da);
    Works = JSON.parse(work);
  }

  const [dues, info] = await Promise.all([
    AsyncStorage.getItem("DUES"),
    AsyncStorage.getItem("Info")
  ]);

  if (dues !== null) {
    DUES.push(dues);
    Works.push(info);

    await AsyncStorage.removeItem("DUES");
    await AsyncStorage.removeItem("Info");
  }

  await Promise.all([
    AsyncStorage.setItem("DA", JSON.stringify(DUES)),
    AsyncStorage.setItem("WA", JSON.stringify(Works))
  ]);
} catch (err) {
  console.log(err);
}

Then your list:

<FlatList>
      data={Works}
      renderItem={({item, index}) => {
        return <Card>
          <Text>{item}</Text>
          <Text>Due: {DUES[index]}</Text>
        </Card>;
      }}
</FlatList>

You could also combine dues and work into a single array of object kind of thing, I guess.