Рэактыўныя аперацыі над масівамі ў 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. Пa кліку на любую li узвядзіце яе лік у квадрат.

У канцы кожнай li зрабіце кнопку, па націску на якую гэтая li будзе выдаляцца са спісу.

Дадзены інпут. Пa кліку на любую li зрабіце так, каб тэкст гэтай li трапіў у інпут.

Мадыфікуйце папярэднюю задачу так, каб па страце фокусу інпута зменены тэкст трапляў у адпаведную li.

Дадзена кнопка. Пa кліку на гэтую кнопку перавярніце парадак li на адваротны.