Modificación de un elemento por id en JavaScript

Supongamos que en la variable arr hay un array de objetos:

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

Supongamos que queremos modificar algún elemento del array. Supongamos que los nuevos datos están almacenados en una variable, por ejemplo, así:

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

En el objeto proporcionado, el id coincide con el id del segundo elemento del array, pero los valores de las propiedades son diferentes. En otras palabras, en data, en la propiedad id, tenemos almacenado el id de ese elemento del array que queremos modificar.

Hagamos este cambio. Para ello, recorreremos los elementos del array con un ciclo y, si el id coincide con el buscado, realizaremos el reemplazo del elemento, y si no coincide, dejaremos el elemento sin cambios:

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

Podemos acortar el código usando el operador ternario:

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

Supongamos que en una variable se almacena el id de un elemento del array. Cree un botón, al hacer clic en el cual se modificará el elemento correspondiente del array.