Paparan Data Reaktif dalam React

Katakan kita mempunyai satu array objek yang mengandungi nama dan penerangan tentang sesuatu:

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

Mari kita paparkan setiap elemen array ini dalam perenggan yang berasingan:

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

Sekarang mari kita buat supaya penerangan pada asalnya disembunyikan, tetapi di hujung setiap perenggan kita tambahkan butang untuk memaparkan penerangan dari perenggan tersebut. Untuk melakukan ini, tambahkan sifat show kepada setiap objek produk, yang mengawal paparan penerangan:

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