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