Реактивно додавање во низа од објекти во React

Ајде сега да ја проучуваме реактивноста на низа од објекти. Во овој случај, ние ќе треба да ги правиме сите промени, пристапувајќи ги елементите по id, кои се чуваат во самите објекти.

Ајде да пробаме. Нека имаме следнава низа од објекти:

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

Ајде да го прикажеме секој елемент од нашата низа во посебен таг li:

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

Направете копче, при кликнување на кое ќе се додава нов елемент на крајот од низата, со што ќе се додаде нов li на крајот од тагот ul.

Направете три инпут полиња и копче. При кликнување на копчето од податоците од инпутот создадете нова li на крајот од тагот ul.