Reaktives Hinzufügen zu Arrays in React
Lassen Sie uns an der reaktiven Hinzufügung
von Elementen zu einem Array arbeiten. Nehmen wir beispielsweise an, wir
haben ein Array, das als
Liste ul ausgegeben wird:
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>;
}
Erstellen Sie einen Button, bei dessen Klick
ein neues Element am Ende des Arrays hinzugefügt wird,
damit ein neues
li am Ende des ul-Tags hinzugefügt wird.
Erstellen Sie ein Input-Feld und einen Button. Beim Klicken
auf den Button soll der Text des Input-Felds zu einem
neuen li-Tag am Ende des ul-Tags werden.
