Mengubah Elemen berdasarkan id di JavaScript

Misalkan dalam variabel arr terdapat array objek:

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

Misalkan kita ingin mengubah suatu elemen array. Misalkan data baru disimpan dalam variabel, contohnya seperti ini:

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

Dalam objek yang diberikan, id cocok dengan id elemen kedua array, sedangkan nilai properti - berbeda. Dengan kata lain, dalam data, properti id menyimpan id dari elemen array yang ingin kita ubah.

Mari lakukan perubahan ini. Untuk melakukannya, kita akan mengulang elemen array dengan loop dan, jika id cocok dengan yang dicari, lakukan penggantian elemen, dan jika tidak cocok, biarkan elemen tidak berubah:

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

Kode dapat disingkat dengan menggunakan operator ternary:

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

Misalkan dalam variabel disimpan id dari suatu elemen array. Buatlah tombol, yang ketika ditekan, akan mengubah elemen array yang sesuai.