Reaktyvios operacijos su masyvais React'e

Dabar išmokime atlikti reaktyvias manipuliacijas su masyvo elementais. Tam kiekvienai li pridėsime įvykio apdorojimo funkciją, kuriai parametru bus perduodamas šios li numeris masyve:

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>;
}

Viduje mūsų funkcijos galime atlikti bet kokią operaciją su mūsų masyvo elementu:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // ką nors padarysime su elementu
		setNotes(copy);
	}
}

Duotas skaičių masyvas. Išveskite jį kaip ul sąrašą. Paspaudus bet kurią li pakelkite jos skaičių kvadratu.

Kiekvienos li pabaigoje padarykite mygtuką, kuri paspaudus ši li bus pašalinta iš sąrašo.

Duotas įvesties laukas. Paspaudus bet kurią li padarykite kad šios li tekstas patektų į įvesties lauką.

Modifikuokite ankstesnę užduotį taip, kad praradus įvesties lauko fokusą, pakeistas tekstas patektų į atitinkamą li.

Duotas mygtukas. Paspaudus šį mygtuką apverskite li tvarką atvirkščia.