Why is my code failing drum-pad elements test (Test #3)?

Hi All,

I am working on the Drum Machine Project.

I got the return part of the react code below and it’s failing where it gives the error:
There should be at least 9 elements with the class “drum-pad” : expected 0 to be at least 9.

Any help would be appreciated.

<div id="drum-machine" onKeyPress={kPress}>
        <div id="display">{this.state.display}</div>
        <button class="drum-pad" id="1" onClick={this.itClicked}>Q</button>
        <button class="drum-pad" id="2" onClick={this.itClicked}>W</button>
        <button class="drum-pad" id="3" onClick={this.itClicked}>E</button>
        <button class="drum-pad" id="4" onClick={this.itClicked}>A</button>
        <button class="drum-pad" id="5" onClick={this.itClicked}>S</button>
        <button class="drum-pad" id="6" onClick={this.itClicked}>D</button>
        <button class="drum-pad" id="7" onClick={this.itClicked}>Z</button>
        <button class="drum-pad" id="8" onClick={this.itClicked}>X</button>
        <button class="drum-pad" id="9" onClick={this.itClicked}>C</button>
      </div>

Hi @dgebrese,

Could you provide the link to your project?

Here is what I have so far…
https://codepen.io/dgebrese/pen/mdeEwod?editors=1111

In reactJS class should be named as className since it is a JSX expression that react returns.

Replace class attribute with className

E.g.,

<button className="drum-pad" id="1" onClick={this.itClicked}>Q</button>

Totally forgot about that. Thanks a lot!