I'm receiving data from api like this:

{
    "isTrue": true,
    "data1": {
        "username": "user1",
        "images": [
            "image1.jpg",
            "image2.jpg"
        ]
    },
    "data2": {
        "location": "new york",
        "age": "80"
    }
}

and setting it in my state as details.

I want to display data in flatlist, so I do this:

<FlatList
    data={state.details}
    renderItem={({item}) => {
        <Details item={item} />;
    }}
></FlatList>

in my component I render data like:

export default Details = ({item}) => {

  return item
    ? Object.values(item).map(value => {
        <Text>{value.data1?.username}</Text>;
      })
    : null;
};

Why don't the items render?

CodePudding user response：

Make sure u pass Array to flat list

like :

const DATA = [
  {
    id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
    title: "First Item",
  },
  {
    id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
    title: "Second Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d72",
    title: "Third Item",
  },
];

flat list will do for loop for you, so u don't need to values(item).map you can do:

export default Details = ({item}) => {

  return 
    <View> 
        <Text>{item.isTrue}</Text>
        <Text>{item.data1.username}</Text>
    </View>
};

change

renderItem={({item}) => {
        <Details item={item} />;
    }}

to

renderItem={({item}) => {
       return <Details item={item} />;
    }}

or

renderItem={({item}) =>  (<Details item={item} />)}

finally don't forget to add <View></View> as parent for <Text><Text>