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