Reaktiiviset taulukko-operaatiot Reactissa

Opitaan nyt tekemään reaktiivisia manipulaatioita taulukon elementeillä. Tehdään tätä varten jokaiselle li tapahtumankäsittelijä, joka välittää parametrina tämän li:n indeksin taulukossa:

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

Funktion sisällä voimme suorittaa minkä tahansa operaation taulukkomme elementille:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // tehdään jotain elementille
		setNotes(copy);
	}
}

Annettu taulukko numeroilla. Näytä se listana ul. Napsautettaessa mitä tahansa li:tä, korota sen numero neliöön.

Tee jokaisen li:n loppuun painike, jota painettaessa tämä li poistetaan listasta.

Annettu syöttökenttä. Napsauta mitä tahansa li:tä niin, että tämän li:n teksti tulee syöttökenttään.

Muokkaa edellistä tehtävää siten, että kun syöttökenttä menettää fokuksen, muokattu teksti tulee vastaavaan li:een.

Annettu painike. Napsauta tätä painiketta kääntääksesi li:t käänteiseen järjestykseen.