I have bee trying to pass the notes data to another component But I don't know why it says undefined.
export default App = () => {
const [notes, setNotes] = useState([
{ key: 1, value: "Hello there what up", title: "Some Title for this" },
{ key: 2, value: "I want to take notes", title: "another for this one" },
]);
return (
<View>
<FlatList
data={notes}
renderItem={({ note }) => (
<View>
<NoteItem note={note} />
</View>
)}
/>
</View>
);
};
export default NoteItem = ({ note }) => {
<Text>{note.title}</Text>
);
};
First of you assume that renderItem in Flatlist has a 'note' property inside it. It does not, it is called item. Also you pass notes but you try to deconstruct note? It should be like this:
export default App = () => {
const [notes, setNotes] = useState([
{ key: 1, value: "Hello there what up", title: "Some Title for this" },
{ key: 2, value: "I want to take notes", title: "another for this one" },
]);
return (
<View>
<FlatList
data={notes}
renderItem={({ item }) => (
<View>
<NoteItem note={item} />
</View>
)}
/>
</View>
);
};
This syntax - ({ note }) - means that the NoteItem component expects a prop named note to be set; however, you're setting the notes prop instead.
Try this:
<FlatList
data={notes}
renderItem={({ item, index }) => (
<View key={index}>
<NoteItem note={item} />
</View>
)}
/>