Reaktiivsed massiivitehted Reactis

Õpime nüüd tegema reaktiivseid manipulatsioone massiivi elementidega. Selleks paneme igale li käsitleja sündmusele, mis parameetrina edastab selle li numbri massiivis:

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

Oma funktsiooni sees saame teha suvalise operatsiooni meie massiivi elemendiga:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // teeme midagi elemendiga
		setNotes(copy);
	}
}

Antud on arvude massiiv. Kuva see loendina ul. Klõpsates suvalisel li-l tõsta selle arv ruutu.

Iga li lõppu tee nupp, mille vajutamisel see li eemaldatakse loendist.

Antud on sisendväli. Klõpsates suvalisel li-l tee nii, et selle li tekst satub sisendväljale.

Muuda eelmist ülesannet nii, et sisendvälja fookuse kaotamisel muudetud tekst satub vastavasse li-sse.

Antud on nupp. Selle nupu vajutamisel pööra li-de järjekord tagurpidiseks.