Vfrdtyky

My drum machine plays the same sounds regardless of the button pressed, all the links are different, when I looked at the console.log output it shows that this.audio is the last url in my keys object. Can someone explain why?

const keys = [{

  name: 'Q',

  url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3',

  description: 'Heater-4_1',

  },{

  name: 'W',

  url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3',

  description: 'Heater-1',

  },{

    name: 'E',

  url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3',

  description: 'Kick_n_Hat',

  },{

    name: 'A',

  url: 'https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3',

  description: 'Chord_1',

  },{

    name: 'S',

  url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3',

  description: 'punchy_kick_1',

  },{

    name: 'D',

  url: 'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3',

  description: 'Brk_Snr',

  },{

    name: 'Z',

  url: 'https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3',

  description: 'Dry_Ohh',

  },{

    name: 'X',

  url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3',

  description: 'Heater-3',

  },{

    name: 'C',

  url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3',

  description: 'Dsc_Oh',

  },

];



class App extends React.Component{

  constructor(props){

    super(props);



    this.state = {

      play:false,

    };



    this.handleClick = this.handleClick.bind(this);

  }



  handleClick() {

    console.log(this.audio);



    this.setState({

      play:!this.state.play,

    });



    this.audio.play();

    this.audio.currentTime = 0;

  }



  render(){

    let drumpad = keys.map(item => <div id={item.description}>

      <div id='display'>

        <button className='drum-pad' id={item.name} onClick={this.handleClick}>{item.name}

          <audio className='clip' id={item.name} src={item.url} ref={ref => this.audio = ref}/>

        </button>

      </div>

  </div>);



    return (

      <div id='drum-machine'>

        {drumpad}

      </div>

    );

  }

}



ReactDOM.render(<App />, document.getElementById('root'));

You overwrite this.audio every single time as your keys.map() iterates through the array. I'd avoid using this.audio all together. Simply use the button onClick event. Pass event to the function, and use console.log(event.target.querySelector('audio').play());:

class App extends React.Component{

  constructor(props){

    super(props);



    this.state = {

      play:false,

    };



    this.handleClick = this.handleClick.bind(this);

  }



  handleClick(event) {

    this.setState({

      play:!this.state.play,

    });



    const audio = event.target.querySelector('audio');



    audio.play();

    audio.currentTime = 0;

  }



  render(){

    let drumpad = keys.map(item => <div id={item.description}>

      <div id='display'>

        <button className='drum-pad' id={item.name} onClick={this.handleClick}>{item.name}

          <audio className='clip' id={item.name} src={item.url} />

        </button>

      </div>

  </div>);



    return (

      <div id='drum-machine'>

        {drumpad}

      </div>

    );

  }

}



ReactDOM.render(<App />, document.getElementById('root'));