Uonyesho wa Data Unaogea katika React

Acha tuwe na safu ya vitu, iliyo na majina na maelezo ya kitu fulani:

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

Wacha tuonyeshe kila kipengele cha safu hii katika aya tofauti:

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

Wacha sasa tufanye ili maelezo yawe yamefichwa awali, lakini mwisho wa kila aya tuongeze vitufe vya kuonyesha maelezo kutoka kwenye aya hiyo. Ili kufanya hivyo, kwa kila kitu ongeza sifa show, inayodhibiti uonyeshaji wa maelezo:

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