Afișarea reactivă a datelor în React

Să presupunem că avem un array de obiecte, care conține denumirile și descrierile a ceva:

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'
  },
];

Să afișăm fiecare element din acest array într-un paragraf separat:

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

Acum să facem astfel încât descrierea să fie inițial ascunsă, dar la sfârșitul fiecărui paragraf să adăugăm butoane pentru afișarea descrierii din acel paragraf. Pentru aceasta, în fiecare obiect cu produs vom adăuga proprietatea show, care reglează afișarea descrierii:

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,
  },
];