Reaktiewe byvoeging tot 'n skikking in React

Kom ons werk met reaktiewe byvoeging van elemente tot 'n skikking. Laat ons byvoorbeeld 'n skikking hê wat as 'n lys uitgevoer word ul:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
  
  const result = notes.map((note, index) => {
    return <li key={index}>{note}</li>;
  });
  
  return <div>
    <ul>
      {result}
    </ul>
  </div>;
}

Задание 1

Maak 'n knoppie wat, wanneer dit gedruk word, 'n nuwe element by die einde van die skikking sal byvoeg, en sodoende 'n nuwe li by die einde van die ul-tag sal voeg.

Задание 2

Maak 'n invoerveld en 'n knoppie. Wanneer daar op die knoppie gedruk word, moet die teks van die invoerveld die nuwe li-tag by die einde van die ul-tag word.