Modification d'un élément par id en JavaScript

Supposons que la variable arr contienne un tableau d'objets :

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

Supposons que nous voulions modifier un élément du tableau. Supposons que les nouvelles données soient stockées dans une variable, par exemple, comme ceci :

let data = {
	id: 'IWSpfBPSV3SXgRF87uO74',
	prop1: 'value21 !',
	prop2: 'value22 !',
	prop3: 'value23 !',
};

Dans l'objet donné, le id correspond au id du deuxième élément du tableau, mais les valeurs des propriétés sont différentes. En d'autres termes, dans data, la propriété id contient le id de l'élément du tableau que nous voulons modifier.

Effectuons cette modification. Pour cela, nous allons parcourir les éléments du tableau avec une boucle et, si le id correspond à celui recherché, nous effectuerons le remplacement de l'élément, sinon, nous laisserons l'élément inchangé :

let res = arr.map(elem => {
	if (elem.id === data.id) {
		return data;
	} else {
		return elem;
	}
});

Il est possible de raccourcir le code en utilisant l'opérateur ternaire :

let res = arr.map(elem => elem.id === data.id ? data : elem);

Supposons qu'une variable stocke le id d'un élément du tableau. Créez un bouton sur lequel, en cliquant, l'élément correspondant du tableau sera modifié.