Reactda massivlar ustida reaktiv amallar

Keling, endi massiv elementlari bilan reaktiv manipulyatsiyalar qilishni o'rganaylik. Buning uchun har bir li ga hodisa ishlovchisini bog'laymiz, unda parametr sifatida bu li ning massivdagi raqamini uzatamiz:

function App() {
	const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
	
	const result = notes.map((note, index) => {
		return <li key={index} onClick={() => doSmth(index)}>
			{note}
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

Funksiyamiz ichida biz massiv elementimiz ustida har qanday amalni bajara olamiz:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // element bilan biror narsa qilamiz
		setNotes(copy);
	}
}

Raqamlar massivi berilgan. Uni ul ro'yxati ko'rinishida chiqaring. Har qanday li ni bosishda uning raqamini kvadratga ko'taring.

Har bir li ning oxirida tugma qiling, unga bosilganda bu li ro'yxatdan o'chirilsin.

Input berilgan. Har qanday li ni bosishda ushbu li matni inputga tushirilsin.

Oldingi vazifani shunday o'zgartiringki, input fokusni yo'qotganda o'zgartirilgan matn mos keladigan li ga tushsin.

Tugma berilgan. Ushbu tugmani bosishda li lar tartibini teskari aylantiring.