Reactda ob'ektlar massiviga reaktiv qo'shish

Keling, endi ob'ektlar massivining reaktivligini o'rganaylik. Bunday holda, biz har qanday o'zgartirishlarni amalga oshirishimiz kerak bo'ladi, ob'ektlar ichida saqlanadigan id orqali elementlarga murojat qilgan holda.

Keling, sinab ko'raylik. Faraz qilaylik, bizda quyidagi ob'ektlar massivi mavjud:

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

Keling, massivimizning har bir elementini alohida li teglarida chiqaraylik:

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

Tugma yarating, unga bosilganda massiv oxiriga yangi element qo'shilsin, shu bilan ul tegining oxiriga yangi li qo'shilgan bo'lsin.

Uchta input va tugma yarating. Tugma bosilganda input ma'lumotlaridan yangi li yarating va ul tegining oxiriga qo'shing.