无法传递 state 道具，表示未定义

Question

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

Answer 1

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

Answer 2

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