Elemento keitimas pagal id JavaScript

Tegu kintamajame arr yra objektų masyvas:

javascriptlet 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:

javascriptlet 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ą:

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

Galima sutrumpinti kodą, panaudojus ternary operatorių:

javascriptlet res = arr.map(elem => elem.id === data.id ? data : elem);
Задание 1

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