React-та массивтерге реактивті операциялар

Енді массив элементтерімен реактивті манipуляциялар жасауды үйренейік. Ол үшін әрбір 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 элементтерінің ретін кері етіп аударыңыз.