Как воспроизвести аудио по нажатию кнопки в React?

Question

[Paxest]

Доброго времени суток!
Выполняю задания на freecodecamp.com -- https://learn.freecodecamp.org/front-end-libraries...
Пытаюсь реализовать воспроизведение, посмотрел код по ссылке выше, но хотелось своим методом.
Пытаюсь задать с помощью setState({url: 'новый url'}), но код не работает, если же изначально разместить ссылку на мелодию в this.state ={url: "https//..."} то кнопка по нажатию воспроизводит мелодию.
Попытался решить несколькими способами,когда использовал onClick={document.getElementById('Eee').play()} на второй кнопке, то при написании .play() с экрана пропадает вообще всё, реакт отказывается работать, если убрать .play() и написать на второй кнопке onClick={document.getElementById('Eee')} кнопки появляются, но не работает аудио.

Подскажите, пожалуйста, где закралась ошибка и как воспроизвести смену url и воспроизведение аудио по обращению к this.state.url?

const musicButton = [
  {
    url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
    letter: "Q",
    numButton: 81,
    soundsName: "Heat-Heat"
  },
  {
    url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
    letter: "W",
    numButton: 87,
    soundsName: "Heat-2-Heat"
  }];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      music: [...musicButton],
      url: ""
    };

  this.play = this.play.bind(this);
  this.audio = new Audio(this.state.url);
};

play = () => {
    let buttonMusic = this.state.music[0].url;
    this.setState({url: buttonMusic});
    this.audio.play();
};

  render() {
      return (
      <div>
        <section id="display">
          <h1>Проверка ссылки</h1>
          <h2>{ this.state.music[1].url}</h2>
          <button onClick={this.play} value='W'>W</button>
          <audio id='Eee'><source src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" /></audio>
          <button onClick={document.getElementById('Eee').play()}'>E</button>
        </section>
      </div>
    );
  }
}

React.render(<App />, document.getElementById("app"));

Answer 1

[0xD34F]

class App extends React.Component {
  state = {
    music: musicButton,
  }

  onClick = e => {
    if (this.audio) {
      this.audio.pause();
    }
    this.audio = new Audio(e.target.dataset.url);
    this.audio.play();
  }

  render() {
    return (
      <div>
        {this.state.music.map(n => (
          <button onClick={this.onClick} data-url={n.url} key={n.numButton}>{n.soundsName}</button>
        ))}
      </div>
    );
  }
}

Comments

[Paxest]

все понял кроме dataset. Пойду читать , спасибо.