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