Reactief toevoegen aan een array van objecten in React

Laten we nu de reactiviteit van een array van objecten bestuderen. In dit geval moeten we elke verandering aanbrengen, door naar de elementen te verwijzen via id, die zijn opgeslagen in de objecten zelf.

Laten we het proberen. Stel dat we de volgende array van objecten hebben:

const initNotes = [
	{
		id: 'GYi9G_uC4gBF1e2SixDvu',
		prop1: 'value11',
		prop2: 'value12',
		prop3: 'value13',
	},
	{
		id: 'IWSpfBPSV3SXgRF87uO74',
		prop1: 'value21',
		prop2: 'value22',
		prop3: 'value23',
	},
	{
		id: 'JAmjRlfQT8rLTm5tG2m1L',
		prop1: 'value31',
		prop2: 'value32',
		prop3: 'value33',
	},
];

Laten we elk element van onze array weergeven in een aparte li tag:

function App() {
	const [notes, setNotes] = useState(initNotes);
	
	const result = notes.map(note => {
		return <li key={note.id}>
			<span>{note.prop1}</span>
			<span>{note.prop2}</span>
			<span>{note.prop3}</span>
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

Maak een knop, waarop wanneer 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 drie invoervelden en een knop. Wanneer er op de knop wordt geklikt, maak dan een nieuwe li aan het einde van de ul tag van de invoergegevens.