Necesito tener siempre solo un elemento true en la matriz.
Se supone que tengo una matriz
let data = [ { letter: "a", id: 1, bool: false }, { letter: "b", id: 2, bool: false }, { letter: "c", id: 3, bool: false}, { letter: "d", id: 4, bool: false }, ]; cada vez que hago clic en un elemento, necesito cambiarlo a true mientras que todos los demás son false . tengo una funcion
const updatedArray = data.map((item) => { if (item.id === id) { return { ...item, bool: true, }; } return item; });Pero funciona como un interruptor para el elemento en el que se hizo clic.
Tu problema está aquí: return item; , en realidad está devolviendo el valor anterior y simplemente actualizando la propiedad bool del elemento que tiene la misma identificación que la variable id , pero necesita alternar la propiedad bool de todos los elementos, puede lograr su objetivo de esta manera:
const updatedArray = array.map((item) => ({...item, bool: item.id === id}));También debe establecer el bool del elemento en falso si no es el elemento seleccionado, no solo establecer el bool del elemento seleccionado en verdadero. Esto debería funcionar:
const id = 3 (clicked item) const updatedArray = array.map(item => { if (item.id === id) { return { ...item, bool: true }; } return { ...item, bool: false } });