Estoy renderizando condicionalmente un botón, de modo que cuando se hace clic en él, el botón cambia de reproducción a pausa. Estoy haciendo esto a través de una operación ternaria, sin embargo, cuando se hace clic en el botón, no cambia. Aquí está mi código:
... const isOn = true; ... return( ... {isOn ? (<Button className="icon" color="info" type="submit" onClick={startMe}><i className="playicon"/></Button>) : (<Button className="icon" color="info" type="submit" onClick={stopMe}><i className="pauseicon"/></Button>)} ... ) Realmente no entiendo por qué esto no funciona. Si configuro manualmente isOn en false , el botón cambia, pero si hago clic, no lo hace.
No puede usar variables regulares como const isOn = true; porque no causarán una nueva renderización. Necesitas usar el estado.
const [isOn, setIsOn] = useState(true); // set default to false if you want const startMe = () => { setIsOn(true); } const stopMe = () => { setIsOn(false); } return( <> {isOn ? (<Button className="icon" color="info" type="submit" onClick={startMe}><i className="playicon"/></Button>) : (<Button className="icon" color="info" type="submit" onClick={stopMe}><i className="pauseicon"/></Button>) } </> )