Content inside flatlList is not showing React Native-CodePudding

I have a screen where I want to display a component, I'm giving an array with the component that has to be displayed inside of a flatList. But is is showing nothing.

array:

const shoppingItem =  [
  {
    title: "title",
    desc: "desc"
  }, 
  {
    title: "title2",
    desc: "desc2"
  }
]

How I use the component on the screen:

    <View> 
      <ShoppingCart data={shoppingItem} />
    </View>

Inside of the component file:

const ShoppingCart = (shoppingItem) => {
  return (
    <View>
      <FlatList
        data={shoppingItem}
        renderItem={({ item }) => {
          return (
            <View>
              <Text>{item.title}</Text>
            </View>
          );
        }}
      ></FlatList>
    </View>
  );
};

Any idea why it showing nothing on the screen? When I delete the Flatlist and just make a view with a Text it does show the text, when I console.log(shoppingItem) in my component file it shows the array with the correct information

CodePudding user response：

Your ShoppingCart component should look like this:

const ShoppingCart = ({data}) => {
  return (
    <View>
      <FlatList
        data={data}
        renderItem={({ item }) => {
          return (
            <View>
              <Text>{item.title}</Text>
            </View>
          );
        }}
      />
    </View>
  );
};

In the App component, you pass the shoppingItem object to the data prop, so the ShoppingCart can only access data from this prop