Αντιδραστικές πράξεις σε πίνακες στο React

Ας μάθουμε τώρα να κάνουμε αντιδραστικές χειρισμούς με τα στοιχεία ενός πίνακα. Για αυτό, σε κάθε li θα προσαρτήσουμε έναν χειριστή συμβάντος, ο οποίος θα μεταβιβάζει ως παράμετρο τον αριθμό αυτής της li στον πίνακα:

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

Μέσα στη συνάρτησή μας μπορούμε να εκτελέσουμε οποιαδήποτε πράξη στο στοιχείο του πίνακά μας:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // κάνουμε κάτι με το στοιχείο
		setNotes(copy);
	}
}

Δίνεται ένας πίνακας με αριθμούς. Εμφανίστε τον ως μια λίστα ul. Με κλικ σε οποιοδήποτε li υψώστε τον αριθμό της στο τετράγωνο.

Στο τέλος κάθε li φτιάξτε ένα κουμπί, με το πάτημα του οποίου αυτή η li θα διαγράφεται από τη λίστα.

Δίνεται ένα πεδίο εισαγωγής. Με κλik σε οποιοδήποτε li κάντε έτσι ώστε το κείμενο αυτής της li να μπει στο πεδίο εισαγωγής.

Τροποποιήστε την προηγούμενη άσκηση έτσι, ώστε με την απώλεια εστίασης του πεδίου εισαγωγής το αλλαγμένο κείμενο να μπαίνει στην αντίστοιχη li.

Δίνεται ένα κουμπί. Με κλικ σε αυτό το κουμπί αντιστρέψτε τη σειρά των li.