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