Problema: necesito cambiar dos componentes en función de un evento onclick. La función que se muestra en el evento onclick handleChange tiene un 'texto' de apoyo. Necesito cambiar el valor de la propiedad 3 veces cada vez que ejecuto el evento onclick.
1.
Tengo un componente de chip (primer componente) que quiero cambiar su texto y color cada vez que se hace clic en mi botón (segundo componente); el botón también cambiará su texto. Así lo hice con la representación condicional y mi evento onclick en mi botón.
La cosa aquí es que tengo 3 estados en los que quiero cambiar mi chip y botón, pero solo puedo hacerlo con dos :
-valor predeterminado que aplico al crear el estado const con useState:
const [change, setChange] = useState("Pending");-el valor que le paso al evento en el boton:
<Button variant="contained" onClick={() => handleChange("hello")}>2.
Además del primer botón, tengo otro botón que quiero ocultar cada vez que cambia mi tercer estado de chip.
Tengo 3 estados: hola, pendiente, cancelar.
Cuando el primer botón y el chip cambian para cancelar , quiero ocultar mi tercer botón.
Traté de hacer una declaración de cambio para resolver el problema de los 3 estados, pero no sé cómo usarlo. Tampoco sé cómo pasar los 3 valores (hola, pendiente, cancelar) dentro del botón.
Aquí está mi ejemplo de código
Nota: soy nuevo en Code Sandbox, así que dígame si ve los cambios porque no administro la plataforma lo suficientemente bien.
Asumiendo que sus tres estados están en orden
const state = ["pending", "hello", "cancel"]; const [change, setChange] = useState(0); function handleChange() { setChange(prevState => prevState === 2 ? 0 : prevState + 1); } const style = [ {color: 'secondary'}, {color: 'primary'}, {style: {backgroundColor:"#7ed6df"}} ]; return ( <> <Chip label={state[change]} {...style[change]} /> <Button variant="contained" onClick={handleChange}> {state[change]} </Button> {change !== 2 && <Button variant="contained">Disappear</Button>} </> );