Reactда массивлар устида реактив операциялар

Келинг энди массив элементлари билан реактив манпуляциялар қилишни ўрганамиз. Бунинг учун биз ҳар бир li га воқеа ишловчисини қўямиз, унда параметр сифатида ушбу li нинг массивдаги номерини ўтказамиз:

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

Функциямиз ичида биз ўз массивимизнинг элементи устида исталган операцияни бажара оламиз:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // элемент билан нарса қиламиз
		setNotes(copy);
	}
}

Сонлардан иборат массив берилган. Уни ul рўйхат шаклида чиқаринг. Ҳар қандай li га босилганда унинг сонини квадратга кўтаринг.

Ҳар бир li нинг охирида тугма қилинг, уни босганда ушбу li рўйхатдан ўчирилсин.

Инпут берилган. Ҳар қандай li га босилганда ушбу li матни инпутга тушсин.

Олдинги масалани шундай модификация қилингки, инпут фокусини йўқотганда ўзгартирилган матни мос li га тушин.

Тугма берилган. Ушбу тугмага босилганда li лар тартибини тескарига буринг.