Αντικειμενική προβολή δεδομένων στο React

Ας υποθέσουμε ότι έχουμε έναν πίνακα αντικειμένων που περιέχει τις ονομασίες και τις περιγραφές κάποιων στοιχείων:

jsxconst initNotes = [
  {
    id: id(),
    name: 'name1',
    desc: 'long description 1'
  },
  {
    id: id(),
    name: 'name2',
    desc: 'long description 2'
  },
  {
    id: id(),
    name: 'name3',
    desc: 'long description 3'
  },
];

Ας εμφανίσουμε κάθε στοιχείο αυτού του πίνακα σε ξεχωριστή παράγραφο:

jsxfunction App() {
  const [notes, setNotes] = useState(initNotes);
  
  const result = notes.map(note => {
    return <p key={note.id}>
      {note.name}, 
      <i>{note.desc}</i>
    </p>;
  });
  
  return <div>
    {result}
  </div>;
}

Ας κάνουμε τώρα την περιγραφή αρχικά κρυφή, αλλά στο τέλος κάθε παραγράφου θα προσθέσουμε κουμπιά για εμφάνιση της περιγραφής από αυτήν την παράγραφο. Για αυτό, σε κάθε αντικείμενο προϊόντος θα προσθέσουμε μια ιδιότητα show που ρυθμίζει την εμφάνιση της περιγραφής:

jsxconst initNotes = [
  {
    id: id(),
    name: 'name1',
    desc: 'long description 1',
    show: false,
  },
  {
    id: id(),
    name: 'name2',
    desc: 'long description 2',
    show: false,
  },
  {
    id: id(),
    name: 'name3',
    desc: 'long description 3',
    show: false,
  },
];