Reactief toevoegen aan array in React
Laten we werken met het reactief toevoegen
van elementen aan een array. Laten we voor het voorbeeld aannemen dat we
een array hebben die wordt weergegeven als een
lijst ul:
function 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>;
}
Maak een knop waarop, wanneer erop wordt geklikt,
een nieuw element wordt toegevoegd
aan het einde van de array, waardoor een nieuwe
li wordt toegevoegd aan het einde van de ul-tag.
Maak een invoerveld en een knop. Wanneer er
op de knop wordt geklikt, laat dan de tekst van het invoerveld
een nieuwe li-tag worden aan het einde van de ul-tag.