Así que tengo una serie de objetos. Recorro esta matriz y creo un botón para cada objeto. Cuando se presiona un botón, ese objeto del botón presionado tiene un valor "activo" que se establecerá en verdadero. cuando se presiona otro botón, su valor "activo" ahora es verdadero, todos los demás se vuelven falsos.
se parece a esto
myarray.map(item => <Button className={item.active? "btn-active" : "btn-disabled"} onClick={() => setActive(item); }} > {item.active? "Checking..." : "Start"} </Button> )El comportamiento que espero es cuando se presiona un botón, pasa a la acción y el resto permanece inactivo, cuando se presiona un nuevo botón, el nuevo botón ahora está activo y el resto está deshabilitado. solo un botón activo a la vez.
Sin embargo, el problema que tengo es que cuando se presiona un botón nuevo, se activa, pero el anterior no cambia de clase y permanece activo también aunque la propiedad "activa" esté configurada en falso.
¿Alguna idea de cómo puedo solucionar este comportamiento?
Sin una imagen completa de cómo está usando el estado, aquí hay un ejemplo de trabajo. Otro problema que vi es que le falta una clave en su elemento jsx asignado.
Es posible que no esté mutando myarray con estado.
import "./styles.css"; import React from "react"; export default function App() { const [myarray, setMyarray] = React.useState([ { id: 1, active: false }, { id: 2, active: false } ]); const setActive = (id) => { setMyarray((prev) => prev.map((item) => { if (item.id === id) { return { ...item, active: true }; } return { ...item, active: false }; }) ); }; return ( <div className="App"> {myarray.map((item) => ( <button key={`button-${item.id}`} className={item.active ? "btn-active" : "btn-disabled"} onClick={() => setActive(item.id)} > {item.active ? "Checking..." : "Start"} </button> ))} </div> ); }