CODEWITHSUNDEEP
reactjsjsxternary-operator
cjl85
cjl85

Reputation: 165

Getting Icon to show up in React - Ternary Expression

I'm trying to add this line of JSX in a ternary expression so that whenever I hover over the song-number-column, I can have the play icon pop up in place of that column.

You can see the line of JSX in context towards the bottom of the code. There are within the td tags.

Currently, it is giving me a Parsing error: Unterminated regular expression and pointing to the ending span tag.

I have looked elsewhere and am not sure how to resolve this error. 

<span className="ion-md-play"> { true ? this.state.hoverOn === <col 
id="song-number-column" /> : null </span>

////////////////////////////////////////////////////////////////////

import React, { Component } from 'react';
import albumData from './../data/albums';

class Album extends Component {
 constructor(props) {
   super(props);

 const album = albumData.find( album => {
   return album.slug === this.props.match.params.slug
 });

 this.state = {
   album: album,
   currentSong: album.songs[0],
   isPlaying: false
 };

 this.audioElement = document.createElement('audio');
 this.audioElement.src = album.songs[0].audioSrc;
 }

 play() {
  this.audioElement.play();
  this.setState({ isPlaying: true });
 }

 pause() {
  this.audioElement.pause();
  this.setState({ isPlaying: false });
 }

 setSong(song) {
  this.audioElement.src = song.audioSrc;
  this.setState({ currentSong: song });
 }

 handleSongClick(song) {
  const isSameSong = this.state.currentSong === song;
   if (this.state.isPlaying && isSameSong) {
     this.pause();
  } else {
   if (!isSameSong) { this.setSong(song); }
     this.play();
  }
 }

  hoverOn(song) {
    this.setState({isMouseEnter: song });

  };

  hoverOff(song) {
    this.setState({isMouseLeave: null})
  };

  render() {
   return (
    <section className="album">
    <section id="album-info">
    <img id="album-cover-art" src={this.state.album.albumCover} alt= . 
    {this.state.album.title}/>
     <div className="album-details">
  <h1 id="album-title">{this.state.album.title}</h1>
  <h2 className="artist">{this.state.album.artist}</h2>
  <div id="release-info">{this.state.album.releaseInfo}</div>
  </div>
  </section>
   <table id="song-list">

   <colgroup>
    <col id="song-number-column" />
    <col id="song-title-column" />
    <col id="song-duration-column" />
  </colgroup>

  <tbody>
  {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>

    <span className="ion-md-play"> { true ? this.state.hoverOn === <col id="song-number-column" /> : null </span>

    </td>
    <td key='number'   > {index + 1}  </td>
    <td key='title'    > {song.title} </td>
    <td key='duration' > {song.duration} </td>

    </tr>
  )}
  </tbody>
  </table>
  </section>
 );
}
}

export default Album;

Upvotes: 0

Views: 1498

Answers (2)

Clark
Clark

Reputation: 305

Is it less } ?

You can try below code.

<span className="ion-md-play"> { this.state.hoverOn ? (<col id="song-number-column" />) : null } </span>

Upvotes: 1

neonfuz
neonfuz

Reputation: 314

Your ternary expression is malformed. replace

<span className="ion-md-play"> { true ? this.state.hoverOn === <col id="song-number-column" /> : null </span>

with

<span className="ion-md-play"> { this.state.hoverOn === true ? (<col id="song-number-column" />) : null </span>

I also added parentheses around the jsx expression. It's not always necessary but there are some quirks with jsx so many people say to always put parens around it.

Upvotes: 2

Related Questions