Show/hide multiple buttons using ref in react.js

Question

I have list of songs with play button. I want to toggle button text to play/pause accordingly.

I have set ref for play/pause <span> and trying to hide/show on button click.

 this.refs.play.hide().

But this is giving error

Uncaught TypeError: _this.refs.play.hide is not a function at Song._this.play

Here is my react component code.

class Song extends React.Component {
  play = (event) => {
    this.refs.play.hide()
    console.log(this.refs.play);
  }
  render() {
    return (
      <div>
        <ul>
          <li>Song 1 <button onClick={this.play}><span ref="play">play</span> <span className='hide' ref="pause"> Pause</span></button></li>
          <li>Song 2 <button onClick={this.play}><span ref="play">play</span> <span className='hide' ref="pause"> Pause</span></button></li>
          <li>Song 3 <button onClick={this.play}><span ref="play">play</span> <span className='hide' ref="pause"> Pause</span></button></li>
        </ul>
      </div>
    );
  }
}

Shubhanu Sharma Shubhanu Sharma · Accepted Answer · 2018-06-08T20:21:18

Player.js

import React, { Component } from "react";
export default class Player extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isPlaying: false
    };
  }
  togglePlay = () => {
    this.setState({
      isPlaying: !this.state.isPlaying
    });
  };
  render() {
    return (
      <div>
        {/* actual player logic {this.props.songurl} */}
        <span>{this.props.songName}</span>
        <button onClick={() => this.togglePlay()}>
          {this.state.isPlaying ? "Pause" : "Play"}
        </button>
      </div>
    );
  }
}

PlayerList.js

    import React, { Component } from "react";
import Player from "./Player";
export default class SongList extends Component {

  render() {
    const songs = [
      {
        name: "song 1",
        url: "google.com"
      },
      {
        name: "song 2",
        url: "google.com"
      },
      {
        name: "song 3",
        url: "google.com"
      },
      {
        name: "song 4",
        url: "google.com"
      },
      {
        name: "song 5",
        url: "google.com"
      },
      {
        name: "song 6",
        url: "google.com"
      }
    ];
    return (
      <div>
        {songs.map((song, key) => (
          <Player key={key} name={song.name} url={song.url} />
        ))}
      </div>
    );
  }
}

Show/hide multiple buttons using ref in react.js

1 Answers