• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

108
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>
  );
};
almost 3 years 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>
  );
};
almost 3 years 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>
   )}
/>
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error