React Native, FlatList does not output my list correctly

I have this quite easy items where I normally loop over with map:

{items.map((item, index) => {
  return (
    <Item
      desc={item.desc}
      done={item.done}
      index={index}
      key={index}
      onSetDone={setDone}
    />
  );
})}

The above code works fine, but as I learned, it is better do use FlatList in my components do render something in a loop. So I tried the following:

<FlatList
  data={items}
  renderItem={(item, index) => (
    <Item
      desc={item.desc}
      done={item.done}
      index={index}
      onSetDone={setDone}
    />
  )}
  keyExtractor={(item, index) => index}
/>

The correct amount of items are rendered, but unfortunately, none of the props gets passed to the Child component. Getting undefined undefined true.

What am I doing wrong here? Why is my data not correctly passed?

Answer

You are not giving renderItem a function with the right parameter. Here is its signature from the doc:

renderItem({ item, index, separators })

Change your code to this:

<FlatList
  data={items}
  renderItem={({ item, index }) => (
    <Item desc={item.desc} done={item.done} index={index} onSetDone={setDone} />
  )}
  keyExtractor={(item, index) => index}
/>

Advertisement

Answer