Reaktiewe operasies op skikkings in React

Laat ons nou leer hoe om reaktiewe manipulasies met skikkingselemente te doen. Vir hierdie doel sal ons op elke li 'n gebeurtenishandler plaas, waarin ons as parameter die nommer van hierdie li in die skikking sal deurgee:

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

Binne ons funksie kan ons enige operasie op ons skikkingselement uitvoer:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // doen iets met die element
		setNotes(copy);
	}
}

Daar is 'n skikking met getalle. Vertoon dit in die vorm van 'n lys ul. Met 'n klik op enige li, verhef die getal daarin tot die tweede mag.

Maak aan die einde van elke li 'n knoppie, waarmee, wanneer daarop gedruk word, hierdie li uit die lys verwyder sal word.

Daar is 'n invoerveld. Met 'n klik op enige li, sorg daarvoor dat die teks van hierdie li in die invoerveld verskyn.

Wysig die vorige taak sodat, wanneer die invoerveld fokus verloor, die veranderde teks in die ooreenstemmende li verskyn.

Daar is 'n knoppie. Met 'n klik op hierdie knoppie, keer die volgorde van die li-elemente om.