Aquí hay un fragmento de 3 botones.
const [role, setRole] = React.useState('') const [active, setActive] = React.useState(false) <Grid container spacing={1}> <Grid item xs={4}> <Button variant='plain' value={role} onClick={e => setState(e.target.value)}> User </Button> </Grid> <Grid item xs={4}> <Button variant='plain' value={role} onClick={e => setState(e.target.value)}> Admin </Button> </Grid> <Grid item xs={4}> <Button variant='plain' value={role} onClick={e => setState(e.target.value)}> Super Admin </Button> </Grid> Lo que quiero hacer es alternar entre los botones, de modo que cuando se selecciona uno, the other 2 active to false para poder cambiar el color de los botones activos e inactivos.
Creo que estás usando mal el useState . Al principio, configura estados para role y active , pero luego no usa sus métodos de configuración (que serían setRole y setActive ). En su lugar, usa setState , que no creo que esté definido aquí.
Aparte de eso, parece que desea realizar un seguimiento activo, como un valor booleano. Eso no va a funcionar, ya que necesita saber cuál de los tres botones está activo.
Sugiero cambiar el estado de active a un número entero. De esta manera, puede numerar los botones y guardar el número.
Entonces, en cada método onClick , llamas a setActive() con el número de botón correcto.
Por ejemplo: Para el botón 1:
setActive(1);He tratado de mostrar lo que quiero decir aquí: