Reaktīvas darbības ar masīviem React

Tagad iemācīsimies veikt reaktīvas manipulācijas ar masīva elementiem. Lai to izdarītu, uz katru li pievienosim notikuma apstrādātāju, kurā kā parametru padosim šī li numuru masīvā:

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

Mūsu funkcijas iekšienē mēs varam veikt jebkuru darbību ar mūsu masīva elementu:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // kaut ko izdarīsim ar elementu
		setNotes(copy);
	}
}

Dots skaitļu masīvs. Izvadiet to saraksta ul veidā. Noklikšķinot uz jebkuras li, paaugstiniet tās skaitli kvadrātā.

Katras li beigās izveidojiet pogu, ar kuras nospiešanu šī li tiks izdzēsta no saraksta.

Dots ievades lauks. Noklikšķinot uz jebkuras li, izdariet tā, lai šīs li teksts nonāktu ievades laukā.

Modificējiet iepriekšējo uzdevumu tā, lai zaudējot ievades lauka fokusu, izmainītais teksts nonāktu attiecīgajā li.

Dota poga. Noklikšķinot uz šīs pogas apgrieziet li secību otrādi.