Question 33517 in React native Question posted in
The official React Native documentation can be found here.

FlatList not rendering on list of text – React native

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>
  );
};
Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search