Adăugarea reactivă într-un array de obiecte în React

Să studiem acum reactivitatea unui array de obiecte. În acest caz, va trebui să efectuăm orice modificări, accesând elementele după id, care sunt stocate în interiorul obiectelor în sine.

Să încercăm. Să presupunem că avem următorul array de obiecte:

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

Să afișăm fiecare element al array-ului nostru într-un tag li separat:

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ți un buton, la click pe care se va adăuga un nou element la sfârșitul array-ului, adăugând astfel un nou li la sfârșitul tag-ului ul.

Creați trei input-uri și un buton. La click pe buton, din datele input-urilor creați o nouă li la sfârșitul tag-ului ul.