Opérations réactives sur les tableaux dans React

Apprenons maintenant à effectuer des manipulations réactives avec les éléments d'un tableau. Pour cela, nous allons attacher un gestionnaire d'événement à chaque li, qui passera en paramètre le numéro de ce li dans le tableau :

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

À l'intérieur de notre fonction, nous pouvons effectuer une opération quelconque sur notre élément du tableau :

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // faisons quelque chose avec l'élément
		setNotes(copy);
	}
}

Étant donné un tableau de nombres. Affichez-le sous forme de liste ul. Lors d'un clic sur n'importe quel li, élevez son nombre au carré.

À la fin de chaque li, ajoutez un bouton sur lequel un clic supprimera ce li de la liste.

Étant donné un champ de saisie. Lors d'un clic sur n'importe quel li, faites en sorte que le texte de ce li soit placé dans le champ de saisie.

Modifiez la tâche précédente afin qu'à la perte du focus du champ de saisie, le texte modifié soit placé dans le li correspondant.

Étant donné un bouton. Lors d'un clic sur ce bouton, inversez l'ordre des li.