Реактивни операции над масиви в 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 ще бъде изтрит от списъка.

Даден е input. При клик върху който и да е li направете така, че текстът от този li да попадне в input.

Модифицирайте предходната задача така, че при загуба на фокус на input промененият текст да попадне в съответния li.

Даден е бутон. При клик на този бутон обърнете реда на li на обратен.