Reaktīvs datu attēlojums React

Pieņemsim, ka mums ir objektu masīvs, kas satur nosaukumus un aprakstus kaut kam:

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

Izvērsim katru šī masīva elementu atsevišķā rindkopā:

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

Tagad padarīsim tā, lai apraksts sākotnēji būtu paslēpts, bet katras rindkopas beigās pievienosim pogas apraksta attēlošanai no šīs rindkopas. Lai to izdarītu, katram objektam ar produktu pievienosim īpašību show, kas regulē apraksta attēlošanu:

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