Tengo un pequeño problema. Necesito representar un nombre de clase en función de algunas condiciones. Tengo un botón Play, un botón Live y botones generales. La mayoría de las clases son iguales, pero necesito agregar una clase adicional a un botón de reproducción.
Mi código hasta ahora se ve así:
className={`"Controller-Button player-btn icon" ${ isSelected ? `${btnName === "PLAYER_LIVE" ? " live-button" : ""}` : `${btnName === "PLAYER_LIVE" ? " live-button" : ""}` }`} Y ahora estoy atascado. Necesito agregar una condición adicional antes de isSelecetd: btnName === "PLAYER_PLAY" ? " play-button" : "" pero tengo un problema sobre cómo poner esto correctamente en dicho renderizado. ¿Si btnName === "PLAYER_LIVE" ? " live-button" : "play-button" esta clase estará en todos los botones.
Puedes usar algo como eso:
const classes = ["Controller-Button", "player-btn", "icon"]; if(isSelected) { classes.push("live-button") } else if(somethingCondition) { classes.push("someClass") }etc...
className={classes.join(' ')}Sugeriría mover esta lógica a una función. Algo como
const getClassName = () => { let className if (btnName === 'PLAYER_PLAY') { // applicable logic here for className here } else { // applicable logic here for className here } return className }