Drum Machine: Does anyone know why this fails test 7?

Hi there! I’m working on the drum machine front-end libraries challenge, I’m using plain react and have all the functionality in place (aesthetic’s will be added later) which passes all but one of the test criteria, number 7:

7. When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique).

The #display div shows a part of the state which is a plain string, modified when a pad is pressed and seems to work ok but produces the following error:

Error: Each time a drum pad is triggered, a unique string should be displayed in the element with the id "display" at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:19953:23

Is this a bug or am I missing something obvious?

Thank you!

Update:

So it turns out the issue was a nested button inside .drum-pad which apparently works on all tests except the very last one hence my confusion. Here’s what I previously had:

<div className="drum-pad" id={'pad_' + this.props.item.letter}> <button onClick={this.props.handleClick} id={'button_' + this.props.item.letter} > {this.props.item.letter} </button> <audio className="clip" id={this.props.item.letter} src={this.props.item.src}></audio> </div>

which is now:

<div className="drum-pad" id={'pad_' + this.props.item.letter} onClick={this.props.handleClick} id={'button_' + this.props.item.letter} > {this.props.item.letter} <audio className="clip" id={this.props.item.letter} src={this.props.item.src}></audio> </div>

5 Likes

Thank you so much for figuring this out and posting the solution! I’ve had everything working but case 7 and I’ve been banging my head on the wall for hours trying to find the error. I knew it would be something simple with the way the test case was running.

Thanks again!