Hiển thị dữ liệu phản ứng trong React

Giả sử chúng ta có một mảng các đối tượng, chứa tên và mô tả của một thứ gì đó:

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

Hãy hiển thị từng phần tử của mảng này trong một đoạn văn riêng biệt:

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

Bây giờ hãy làm sao cho mô tả ban đầu bị ẩn đi, nhưng ở cuối mỗi đoạn văn thêm một nút để hiển thị mô tả của đoạn văn đó. Để làm điều này, hãy thêm thuộc tính show vào mỗi đối tượng sản phẩm, để điều chỉnh việc hiển thị mô tả:

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