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?

You're supposed to use renderItem={({ item, index } => <Card>...</Card>} (item is Works[i] already, and there's no need to manually increment i); this basically works like when you use Array.map to render a list in React), see the docs: reactnative.dev/docs/flatlist#renderitem — user5734311
– user5734311, Commented Jul 7, 2020 at 9:46
Are you properly using setState after reading Works? Because that's how React works: the app re-renders after a state change. If Works starts out as empty array, the list will never appear unless you call this.setState({ Works: ... }); If you haven't used React before, I'd recommend learning React first before jumping into React native. — user5734311
– user5734311, Commented Jul 7, 2020 at 9:59
Using state is a fundamental technique of React. I suggest starting here: reactjs.org/tutorial/tutorial.html — user5734311
– user5734311, Commented Jul 7, 2020 at 10:01

Tushar · Accepted Answer · 2020-07-07 09:51:36Z

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>

edited Jul 7, 2020 at 9:51

user5734311

answered Jul 7, 2020 at 9:43

Tushar

6605 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tushar Over a year ago

I have edited my answer, please check if it works now.

user5734311 Over a year ago

It's ({ item, index })

Blue Syntax Over a year ago

Hmm, ill test that.

Blue Syntax Over a year ago

Hmm, Nope, did not work, it seems like there is something wrong with the saving, seems the arrays exist (logging).

Joshua · Accepted Answer · 2020-07-07 10:11:00Z

0

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.

edited Jul 7, 2020 at 10:11

answered Jul 7, 2020 at 10:01

Joshua

6511 gold badge6 silver badges19 bronze badges

3 Comments

Blue Syntax Over a year ago

Ill try that, Thanks :)

user5734311 Over a year ago

I'm sorry, but answering this is pointless since OP isn't using state.

user5734311 Over a year ago

That's fine, I'm just informing you of the recent development that renders this question moot; for all we know, the code that OP shows might work perfectly fine in theory.

Collectives™ on Stack Overflow

React Native FlatList component is not rendering my array

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related