Reaktiw massiwlere obýektleri goşmak React-da

Indi obýektleriň massiwiniň reaktiwligini öwreneli. Bu ýagdaýda, biz ähli üýtgeşmeleri ýerine ýetirsek, obýektleriň içinde saklanýan id esasynda elementlere ýüz tutmaly bolarys.

Gelip, synap göreli. Bizde aşakdaky obýektleriň massiwisi bar bolsun:

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

Gelip, massiwimiziň her elementini aýry li teginde görkezeli:

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

Bir düwmäni ýasap beriň, basylanda massiwiň ahyryna täze element goşulmaly, şeýlelikde ul teginiň ahyryna täze li goşulmaly.

Üç sany input we bir düwmäni ýasap beriň. Düwmä basylanda inputlardaky maglumatlardan ul teginiň ahyrynda täze li dörediň.