FlatList not rendering parent component data in child component in React Native

Question

I am currently getting data from my server and saving it in a UseState in my parent component and passing it to my child component. I see the data is getting passed when doing console.log but when I try to render it using FlatList, I get this error along with an entire list without any data in it

Heres the code I am using to make the call, I am returning the flatlist in 'infoDisplay' depending on the option that was picked

 const games = ({item}) => ( <View style={styles.gameContainer}> <Text style={styles.gTitle}> <Text style={styles.gConTitle}>Title: </Text>{item.Title}</Text> <Text style={styles.gInfo}><Text style={styles.gConTitle}>Release Date: </Text>{item.Year}</Text> <Text style={styles.gInfo}><Text style={styles.gConTitle}>Genre: </Text>{item.Genre}</Text> </View> ); if(props.name == 'Games'){ console.log("props.parentToChild: ", props.parentToChild) alert(props.parentToChild) infoDisplay = <FlatList data={props.parentToChild} renderItem={games} keyExtractor={item => item.id}/> }

Here is the snippet of the data I'm trying to process:

Answer 1

I've fixed your code, here's a sandbox link for it https://codesandbox.io/s/wizardly-sid-wuz4v?file=/src/App.js

You can have your data as you wanted in your log and your ChildComponent's render, and the warning is because you didn't provide a key for FlatList or its Item's View.

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View, FlatList } from "react-native";

function ChildComponent(props) {
  const games = ({ item }) => (
    <View key={item.id} style={styles.gameContainer}>
      <Text style={styles.gTitle}>
        <Text style={styles.gConTitle}>Title: </Text>
        {item.Title}
      </Text>
      <Text style={styles.gInfo}>
        <Text style={styles.gConTitle}>Release Date: </Text>
        {item.Year}
      </Text>
      <Text style={styles.gInfo}>
        <Text style={styles.gConTitle}>Genre: </Text>
        {item.Genre}
      </Text>
    </View>
  );

  if (props.name === "Games") {
    console.log("props.parentToChild: ", props.parentToChild);
  }

  return (
    <FlatList
      key={props.id}
      data={props.parentToChild}
      renderItem={games}
      keyExtractor={(item) => item.id}
    />
  );
}

function App() {
  const [parentToChildState, setParentToChildState] = useState(null);

  useEffect(() => {
    const parentToChild = [
      {
        id: 0,
        Title: "Rise of the Tomb Raider",
        Year: "2016-02-09",
        Genre: "action-adyenture"
      },
      { id: 1, Title: "Death Stranding", Year: "2019-11-08", Genre: "action" }
    ];

    setParentToChildState(parentToChild);
  }, []);

  return <ChildComponent name="Games" parentToChild={parentToChildState} />;
}

const styles = StyleSheet.create({});

export default App;