hoverOn и hoverOff не работает - если оператор - реагирует

Question

Начиная со строки 75, я пытаюсь добавить оператор if, чтобы добавить все элементы span, возвращая их, но это выдает ошибку.

Ожидается ",", и я не уверен, что добавить.Обернуть весь элемент в строки?

https://github.com/cjl85/bloc-jams-react/blob/master/src/components/Album.js

Строка 84 - это то, что дает мне ошибку.Оператор return должен ожидать эту строку с запятой.

      {this.state.album.songs.map((song, index) =>
    <tr className="song"
      key={index}
        onClick={() => this.handleSongClick(song)}
          onMouseEnter={() => this.hoverOn(song)}
            onMouseLeave = {() => this.hoverOff(song)}>
    <td>
    if{(this.state.hoverOn === song)} {
          {return <span className = "ion-md-play"></span>)};
    }}
    // {(this.state.hoverOn === song) ? (<span className="ion-md-play"></span>) :
    //  (this.state.isPlaying === true && this.state.currentSong === song) ? (<span className="ion-md-pause"></span>) :
    //  (this.state.isPlaying !== true && this.state.currentSong === song) ? (<span className="ion-md-play"></span>) : null }
    </td>

Answer 1

Вы можете написать так

const { isHovered, isPlaying, currentSong } = this.state
return(
 /* Code Before */
 {isHovered === song ? (<span className="ion-md-play"/>) : null}
 {(isPlaying === true && currentSong === song) ? (<span className="ion-md-pause"/>) : null }
 {(isPlaying !== true && currentSong === song) ? (<span className="ion-md-play"/>) : null }
)

Вы можете проверить еще раз?

Но я видел в вашем коде, где isHovered в состоянии, что он функционален, поэтому вы можете проверить его