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?
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}
/>