Build a Drum Machine codepen error

JavaScript
1

Tell us what’s happening:
codepen is claiming there is an error in my JS but I cannot figure it out. my css is also not rendering but I assume its related.
Thanks!

Your code so far


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-drum-machine/

2

I see 3 issues:

  1. Constructor should always be on top (in Drumpad)
  2. Syntax error, handleClick () => { should be handleClick = () => {
  3. <drumpad... should be <Drumpad...
1 Like
3

const data = [
{ id: ‘snare’, letter: ‘Q’, src: ‘https://www.myinstants.com/media/sounds/snare.mp3’ },
{ id: ‘bass 1’, letter: ‘W’, src: ‘https://www.myinstants.com/media/sounds/bass-drum.mp3’ },
{ id: ‘bongo’, letter: ‘E’, src: ‘http://tipiwiki.free.fr/snd/Percussion(4e)2.wav’ },
{ id: ‘tom tom’, letter: ‘A’, src: ‘http://www.denhaku.com/r_box/sr16/sr16tom/loelectm.wav’ },
{ id: ‘bass 3’, letter: ‘S’, src: ‘http://billor.chsh.chc.edu.tw/sound/bass4.wav’ },
{ id: ‘shotgun’, letter: ‘D’, src: ‘http://david.guerrero.free.fr/Effects/ShotgunReload.wav’ },
{ id: ‘high hat’, letter: ‘Z’, src: ‘http://www.denhaku.com/r_box/tr707/closed.wav’ },
{ id: ‘drum hit’, letter: ‘X’, src: ‘http://www.masterbits.de/sc_docu/sounds1/1TM00013.MP3’ },
{ id: ‘laser’, letter: ‘C’, src: ‘http://www.sa-matra.net/sounds/starcontrol/Umgah-Backzip.wav’ },
]

class Drumpad extends React.Component {

constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}

handleClick () {
this.audio.play()
this.audio.currentTime = 0
}

render() {
return (

    <p>{this.props.letter}</p>
    <audio 
      ref = { this.audio }
      className = "clip" 
      src = {this.props.src} 
      id = {this.props.letter}>
    </audio>
    </div>
)

}
}

class App extends React.Component {
constructor(props) {
super(props)
}

render() {
return (



{data.map(d =>
<Drumpad
id = {d.id}
letter = {d.letter}
src = {d.src} 
        />
      )}
      </div>
    </div>
  
)

}
}

ReactDOM.render(, document.getElementById(“root”));

4

here you go, this works

1 Like
5

my issues always seem to be typos but I cant find them :confused:

6

It gets better with practice, and also a decent editor / linter, FYI, if you click on the little red exclamation point that code pen shows on error, it will take you to the line where the error is, narrows down the proverbial ‘haystack’ a bit…

1 Like