Drum Machine Error on Test 6

JavaScript
1

Hi All,

I am getting some errors with my drum machine.
I cannot pass test 6, but it also says that I passed test 6? Has anyone seen this? Is this an issue with the test code or the drum machine? I cleared my cache and tried again and got the same results.

image
image989×401 29 KB

Here is the codepen link

3

Ah ok, so the tests are sending keycodes instead of an outright char. (also I didn’t bind this for handleKeyPress method) thanks!

Well, that took a minute to figure out.

Does anyone know if that is a choice of the testing developer(s)? Or is that a limit of the testing suite? Or is it just best practice to handle these things via char codes? <— seems like that

4

Ok, so I got all of the tests to pass, now I am adding some styling to the drums.

So I’ve defined const styles outside of the react app.
But now, everytime I pass that const to the relevant JSX element, the JSX element no longer adds the text of the relevant key letter(i.e. Q,W,E, etc) to the HTML created by JSX/React

code link
render method (see Const drumpad for styling, and then return where drumpad is added to the render):

  render() {
    // create serious of drum pads via js array.map
    const Drumpad = soundBank.map(x => {return(
      <div style={this.state.buttonStyle} className='drum-pad' id={x.id} onClick={this.onClick}>
        {x.keyTrigger}
        {console.log(x.keyTrigger)}
        <audio className='clip' src={x.url} id={x.keyTrigger}/>
      </div>)
    })
    
    return (
      <div id='drum-machine'>
        <div className='drum-header'>
          <p id='drum-title'>Drum Machine 1000</p>
          <p id='display'>{this.state.display}</p>
        </div>
        <div className='drum-landing'>
          {Drumpad}
        </div>
      </div>
    );
  }
};

Style from earlier in code

const buttonUpStyle = {
  color:'#6E92A1',
  width:90,
  height:90,
  border:'1px solid black',
  lineHeight:90,
  margin:'1px 5px 5px 1px',
  borderRadius:20,
  boxShadow:'2px 2px 2px 0px #585858'
}

If I just delete the style line from the JSX drumpad map, and style via regular CSS, it will display the characters, but when inserting the style via react, something is breaking. The characters aren’t even getting added to the JSX. Does this have something to do with how react react renders to the DOM?

If I can successfully insert the style via react, I can then “animate” the div element to look like it was clicked.

Still trying to wrap my ahead around react. Hoping someone can provide feedback on this issue, and the general structure in regards to react best practices.