Opérations réactives sur des tableaux d'objets dans React

Apprenons maintenant à effectuer des opérations réactives sur des tableaux d'objets. Dans ce cas, nous devons passer à la fonction l'id de l'élément du tableau avec lequel nous allons faire quelque chose :

function App() {
	const [notes, setNotes] = useState(initNotes);
	
	const result = notes.map(note => {
		return <li key={note.id}>
			<span>{note.prop1}</span>
			<span>{note.prop2}</span>
			<span>{note.prop3}</span>
			
			<button onClick={() => doSmth(note.id)}>
				btn
			</button>
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

Pour faire quelque chose avec un élément, nous devons d'abord le trouver en parcourant tout le tableau avec une boucle :

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// faire quelque chose avec l'élément
			}
			
			return note;
		}));
	}
}

Prenons un exemple et modifions les textes de l'objet trouvé :

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				note.prop1 += '!';
				note.prop2 += '!';
				note.prop3 += '!';
				
				return note;
			}
			
			return note;
		}));
	}
}

À la fin de chaque li, ajoutez un bouton, en cliquant sur lequel ce li sera supprimé de la liste.

Trois champs de saisie sont donnés. À la fin de chaque li ajoutez un bouton, en cliquant sur lequel les données de l'objet de ce li seront placées dans les champs de saisie correspondants.

Modifiez la tâche précédente pour qu'à côté des champs de saisie se trouve un bouton, en cliquant sur lequel les données des champs de saisie seront placées dans le li correspondant.