使用三元嵌套 If Els 语句 React 渲染 className

Question

I do have a small issue I do need to render a className based on few conditions. I have a Play button, Live button and general buttons. Most classes are the same, but I do need to add extra class to a play button.

My code so far is looking like this:

 className={`"Controller-Button player-btn icon" ${
          isSelected
            ? `${btnName === "PLAYER_LIVE" ? " live-button" : ""}`
            : `${btnName === "PLAYER_LIVE" ? " live-button" : ""}`
        }`}

And now I am stuck. I need to add extra condition before isSelecetd: btnName === "PLAYER_PLAY" ? " play-button" : "" btnName === "PLAYER_PLAY" ? " play-button" : "" but i do have issue how properly put this in such render. If I will add btnName === "PLAYER_LIVE" ? " live-button" : "play-button" btnName === "PLAYER_LIVE" ? " live-button" : "play-button" this class wil be in all buttons.

Answer 1

You can use something like that:

const classes = ["Controller-Button", "player-btn", "icon"];
if(isSelected) {
  classes.push("live-button")
} else if(somethingCondition) {
   classes.push("someClass")
}

etc...

 className={classes.join(' ')}

Answer 2

I would suggest to move this logic into a function. Something like

const getClassName = () => {
  let className
  if (btnName === 'PLAYER_PLAY') {
    // applicable logic here for className here
  } else {
    // applicable logic here for className here
  }
  return className
}