Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

50
Views
Can't pass the state props, says undefined

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>
  );
};
7 months ago · Juan Pablo Isaza
2 answers
Answer question

0

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>
  );
};
7 months ago · Juan Pablo Isaza Report

0

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>
   )}
/>
7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs