Ajout réactif dans un tableau d'objets dans React

Étudions maintenant la réactivité d'un tableau d'objets. Dans ce cas, nous devrons effectuer toutes modifications en accédant aux éléments par leur id, qui sont stockés à l'intérieur des objets eux-mêmes.

Essayons. Supposons que nous ayons le tableau d'objets suivant :

const initNotes = [
	{
		id: 'GYi9G_uC4gBF1e2SixDvu',
		prop1: 'value11',
		prop2: 'value12',
		prop3: 'value13',
	},
	{
		id: 'IWSpfBPSV3SXgRF87uO74',
		prop1: 'value21',
		prop2: 'value22',
		prop3: 'value23',
	},
	{
		id: 'JAmjRlfQT8rLTm5tG2m1L',
		prop1: 'value31',
		prop2: 'value32',
		prop3: 'value33',
	},
];

Affichons chaque élément de notre tableau dans une balise li séparée :

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>
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

Créez un bouton sur lequel, en cliquant, un nouvel élément sera ajouté à la fin du tableau, ajoutant ainsi un nouveau li à la fin de la balise ul.

Créez trois champs de saisie et un bouton. En cliquant sur le bouton, créez un nouveau li à la fin de la balise ul à partir des données des champs de saisie.