Aggiunta reattiva a un array di oggetti in React

Ora studiamo la reattività di un array di oggetti. In questo caso dovremo effettuare qualsiasi modifica, accedendo agli elementi tramite il loro id, che sono memorizzati all'interno degli oggetti stessi.

Proviamo. Supponiamo di avere il seguente array di oggetti:

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

Visualizziamo ogni elemento del nostro array in un tag li separato:

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

Crea un pulsante che, quando cliccato, aggiunga un nuovo elemento alla fine dell'array, aggiungendo così un nuovo li alla fine del tag ul.

Crea tre input e un pulsante. Alla pressione del pulsante, crea un nuovo li alla fine del tag ul utilizzando i dati dagli input.