Shfaqja Reaktive e të Dhënave në React

Le të supozojmë se kemi një grup objektesh, që përmbajnë emrat dhe përshkrimet e diçkaje:

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

Le të shfaqim çdo element të këtij grupi në një paragraf të veçantë:

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

Tani le ta bëjmë në mënyrë që përshkrimi të jetë i fshehur fillimisht, por në fund të çdo paragrafi të shtojmë butona për të shfaqur përshkrimin nga ai paragraf. Për këtë, në çdo objekt produkti do të shtojmë vetinë show, që rregullon shfaqjen e përshkrimit:

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