Operacione Reaktive mbi Vargjet në React

Tani le të mësojmë të kryejmë manipulime reaktive me elementët e vargut. Për këtë, ne do të vendosim një përgjegjës ngjarjeje për çdo li ku do të kalojmë si parametër indeksin e kësaj li në varg:

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

Brenda funksionit tonë mund të kryejmë çdo operacion me elementin tonë të vargut:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // bëj diçka me elementin
		setNotes(copy);
	}
}

Jepet një varg me numra. Shfaqeni atë në formën e një liste ul. Me klikim në çdo li ngritni numrin e saj në katror.

Në fund të çdo li bëni një buton, me shtypje të së cilës kjo li do të fshihet nga lista.

Jepet një input. Me klikim në çdo li bëni që teksti i kësaj li të shfaqet në input.

Modifikoni detyrën e mëparshme ashtu që, në humbjen e fokusit të input, teksti i modifikuar të shfaqet në li përkatëse.

Jepet një buton. Me klikim në këtë buton kthejeni rendin e li në të kundërt.