Modifica di un elemento per id in JavaScript

Sia nella variabile arr un array di oggetti:

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',
	},
];

Supponiamo di voler modificare un elemento dell'array. Siano i nuovi dati memorizzati in una variabile, ad esempio, come questi:

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

Nell'oggetto fornito, id coincide con id del secondo elemento dell'array, mentre i valori delle proprietà sono diversi. In altre parole, in data, la proprietà id contiene id dell'elemento dell'array che vogliamo modificare.

Eseguiamo questa modifica. Per fare ciò, itereremo gli elementi dell'array con un ciclo e, se id coincide con quello cercato, eseguiremo la sostituzione dell'elemento, altrimenti lasceremo l'elemento invariato:

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

È possibile abbreviare il codice, utilizzando l'operatore ternario:

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

Sia memorizzato in una variabile l'id di un elemento dell'array. Crea un pulsante che, al click, modifichi l'elemento corrispondente nell'array.