Getting Object Error with React in CodePen

Question

I am trying to make a drum machine that will play a different sound when each button is pressed. I am using CodePen to make the project and I keep getting an object error when I try to use the DrumPad Component. Any help would be greatly appreciated. The relevant code is below.

Here is the link to my CodePen App: https://codepen.io/bbond766/pen/NWdLNog?editors=0010

const name = "drum-pad-";

class DrumPad extends React.Component{
  constructor(props){
    super(props);
  }
  name = name + this.props.letter;
  render(){
    return (<button id={name} class="drum_pad" type="button" onClick={this.props.click}>{this.props.letter}<audio id={this.props.letter} src={this.props.audio} /></button>);
  }
}

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      sound:""
    }
  }
  
  handleClick = value => {
    this.setState({
      sound: value
    })
  }
  
  
  render(){
    return <div id="drum-machine">
      <div id="drumpad">
        <DrumPad letter="Q" audio = "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" click={this.handleClick("Heater-1")} />
        <DrumPad letter="W" audio = "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" click={this.handleClick("Heater-2")} />
        <button id="drum-pad-e" class="drum_pad">E<audio id="E" src="'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'" /></button>
        <button id="drum-pad-a" class="drum_pad">A<audio id="A" src="'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'" /></button>
        <button id="drum-pad-s" class="drum_pad">S<audio id="S" src="'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'" /></button>
        <button id="drum-pad-d" class="drum_pad">D<audio id="D" src="'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'" /></button>
        <button id="drum-pad-z" class="drum_pad">Z<audio id="Z" src="'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'" /></button>
        <button id="drum-pad-x" class="drum_pad">X<audio id="X" src="'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'" /></button>
        <button id="drum-pad-c" class="drum_pad">C<audio id="C" src="'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'" /></button>
        
      </div>
      <div id="display">
        <text>{this.state.sound}</text>
      </div>
    </div>
  }
}

Double H · Accepted Answer · 2021-05-21 02:43:08Z

2

Change Your handleClick method something like that

handleClick = sound => () => {
    this.setState({ sound })
}

answered May 21, 2021 at 2:43

Double H

4,1901 gold badge17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting Object Error with React in CodePen

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related