Elemento keitimas pagal id JavaScript

Tegu kintamajame arr yra objektų masyvas:

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

Tegu mes norime pakeisti kurį nors masyvo elementą. Tegu nauji duomenys saugomi kintamajame, pavyzdžiui, šie:

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

Pateiktame objekte id sutampa su id antrojo masyvo elemento, o savybių reikšmės - kitos. Kitaip tariant, data savybėje id saugomas to masyvo elemento id, kurį mes norime pakeisti.

Atlikime šį pakeitimą. Tam mes perimsime masyvo elementus ciklu ir, jei id sutampa su ieškomuoju, atliksime elemento pakeitimą, o jei nesutampa, paliksime elementą nepakeistą:

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

Galima sutrumpinti kodą, panaudojus ternary operatorių:

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

Tegu kintamajame saugomas elemento id masyvo. Sukurkite mygtuką, kurį paspaudus bus pakeistas atitinkamas masyvo elementas.