Estoy usando useState dentro de useContext, tengo un botón dentro de un componente que cuando el usuario hace clic en el botón agregará un nuevo elemento en la página que, a cambio, creará un nuevo objeto en la matriz useState de la siguiente manera:
const [items, setItems] = useState([]) const addItem = () => { setItems((items) => [...items, { id: items.length, key: randomKey(), selected: false, FG_value: 0, FS_value: 0, FB_value: 'auto', AS_value: 'auto', OR_value: 0, }]) }Ahora, cuando un usuario haga clic en un elemento de la página, alternará el valor "seleccionado" falso/verdadero de esta manera:
const editItem = (value) => { const selectedItem = items.map((item) => item.key === value ? { ...item, selected: !item.selected } : item) setItems(selectedItem) } El código anterior funciona como debería, pero donde me quedo atascado es que cuando un usuario hace clic en un elemento y luego hace clic en un elemento diferente, los valores "seleccionados" de ambos elementos son verdaderos. Estoy tratando de escribir correctamente el código para que si se hace clic en un elemento y el item.key === value , luego cambie el "seleccionado" y establezca todos los demás items.selected . valores seleccionados en falso. Entonces, básicamente, si el usuario hace clic en el primer elemento, ese se selecciona, luego, si hace clic en un elemento diferente, anula la selección del primer elemento y luego selecciona el nuevo elemento en el que se hizo clic.
Sugeriría, en lugar de estructurar su estado de manera que cada elemento tenga una propiedad seleccionada, cree un estado separado para el elemento seleccionado. Entonces es tan simple como establecer ese estado en la clave o el índice del elemento seleccionado.
Si los elementos no se eliminan de la matriz, puede hacer lo siguiente:
const [items, setItems] = useState([]) const [selectedItemIndex, setSelectedItemIndex] = useState(-1); // ... {items.map((item, i) => ( <other item JSX> <button onClick={() => setSelectedItemIndex(i === selectedItemIndex ? -1 : i)} ))} Ahora, donde sea que use item.selected actualmente, compare el índice del elemento que se está iterando con el selectedItemIndex .
Al igual que CertainPerformance, mantendría un estado separado para el elemento seleccionado. Sin embargo, si desea modificar su función editItem para alternar un elemento (de seleccionado a no seleccionado o de no seleccionado a seleccionado) y hacer que todos los demás elementos no estén seleccionados (es decir, seleccionado es false ), entonces puede escribirlo así:
const editItem = (value) => { const updatedItems = items.map((item) => item.key === value ? { ...item, selected: !item.selected } : { ...item, selected: false }) setItems(updatedItems) } Cambié el nombre de elemento selectedItem a updatedItems porque el elemento selectedItem hizo que pareciera que la variable era solo para un elemento cuando en realidad era para todos los elementos.
Avísame si te ayuda.