Modificarea unui element după id în JavaScript

Să presupunem că în variabila arr se află un tablou de obiecte:

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

Să presupunem că vrem să modificăm un element al tabloului. Să presupunem că noile date sunt stocate într-o variabilă, de exemplu, astfel:

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

În obiectul dat id coincide cu id celui de-al doilea element al tabloului, iar valorile proprietăților sunt diferite. Cu alte cuvinte, în data în proprietatea id este stocat id acelui element al tabloului pe care îl dorim să-l modificăm.

Să efectuăm această modificare. Pentru aceasta vom parcurge elementele tabloului cu un ciclu și, dacă id coincide cu cel căutat, vom efectua înlocuirea elementului, iar dacă nu coincide, vom lăsa elementul neschimbat:

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

Putem scurta codul, folosind operatorul ternar:

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

Să presupunem că într-o variabilă este stocat id unui element al tabloului. Creați un buton, la click pe care va fi modificat elementul corespunzător al tabloului.