Промена на елемент по id во JavaScript

Нека во променливата arr лежи низа од објекти:

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

Нека сакаме да смениме некој елемент од низата. Нека новите податоци се чуваат во променлива, на пример, вака:

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

Во дадениот објект id совпаѓа со id на вториот елемент од низата, а вредностите на својствата се различни. Со други зборови, во data во својството id ни се чува id на оној елемент од низата што сакаме да го смениме.

Ајде да ја извршиме оваа промена. За ова ќе ги прелистуваме елементите од низата со циклус и, ако id совпаѓа со бараниот, ќе извршиме замена на елементот, а ако не совпаѓа, ќе го оставиме елементот непроменет:

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

Може да се скрати кодот, користејќи тернарен оператор:

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

Нека во променлива се чува id на елемент од низата. Направете копче, при кликнување на кое ќе се смени соодветниот елемент од низата.