New to react native. I have a simple component that takes in a list of ingredients and returns the items in a flatList of text. For some reason I can't get the data to render. Am I doing something wrong? My ingredients looks like this:

const ingredients = [chicken, butter, oil]

const DisplayRec = ({ ingredients }) => {
  return (
    <View style={styles.container}>
      <Text>Your Recipes</Text>
      <FlatList
        //keyExtractor={(recName) => recName}
        data={ingredients}
        renderItem={({ recName }) => (
          <Text>{recName}</Text>
          
        )}
      />
    </View>
  );
};

CodePudding user response：

You are using it in incorrect manner please try

 <FlatList
    //keyExtractor={(recName) => recName}
    data={ingredients}
    renderItem={({item, index}) => (
      <Text>{item}</Text>
      
    )}
  />

also please go throught the documentation of FlatList https://reactnative.dev/docs/flatlist#required-renderitem

CodePudding user response：

First you have to go through with the official documentation of React-native . flatlist documentation

you can just simply pass ingredients data to flatlist and render its function

For live editing expo link

const ingredients = [
  {
    id: 'bd7',
    title: 'chicken',
  },
  {
    id: '3ac',
    title: 'butter',
  },
  {
    id: '5869',
    title: 'oil',
  },
];

export default function App() {

const renderItem = ({ item }) => (
   <Text>{item.title}</Text>
  );

  return (
    <View >
       <FlatList
        data={ingredients}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
   
    </View>
  );
}

CodePudding user response：

you need to use return in render item

<FlatList
            //keyExtractor={(recName) => recName}
            data={ingredients}
            renderItem={({ recName }) => {
            return (
            <Text>{recName}</Text>
              
            )}}
          />

Hope it's working fine for you