Reaktive Datenanzeige in React

Nehmen wir an, wir haben ein Array von Objekten, die Namen und Beschreibungen von etwas enthalten:

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

Lassen Sie uns jedes Element dieses Arrays in einem separaten Absatz ausgeben:

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

Lassen Sie uns nun erreichen, dass die Beschreibung zunächst ausgeblendet ist, aber am Ende jedes Absatzes Schaltflächen zum Anzeigen der Beschreibung aus diesem Absatz hinzufügen. Dazu fügen wir jedem Produktobjekt eine Eigenschaft show hinzu, die die Anzeige der Beschreibung steuert:

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