Drum Machine tests 4-6

Hi guys
I will be grateful for a hint on how to pass the test, everything seems to work, maybe I missed something

test fails 4-6

https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-drum-machine task

https://codepen.io/asnswer/pen/YzVObPE my code

Hi! I’m doing this Certification as well, so I’m new with React, but I would like to try to help you anyway!

I see that one of the tests that is failing is:

  1. Within each .drum-pad, there should be an HTML5 <audio> element which has a src attribute pointing to an audio clip, a class name of “clip”, and an id corresponding to the inner text of its parent .drum-pad (e.g. id=“Q”, id=“W”, id=“E” etc.).

I think the id of your audio component is not being set correctly with the value that the test needs. And also, you need to add the className of “clip” to the audio element. Notice that when you set the id of your audio element in the Clip component, you’re doing id={this.state.id} , but the id in the state of the component its an empty string, so I think you’re always setting the id to an empty string in all of your Clip components. To solve this I think you can pass the id with the value you need from the parent component. That way you can set a different id for each Clip component, but still use a single Component class. I think it could be something like:

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

and then in your Clip class you call that id value like:

<audio src={this.state.url} preload="auto" id={this.props.id} className='clip'>/audio>

I think the test is checking for this id and this class inside the audio element, so if you set that on a different element, the test will not read it.

I’m sorry I dont know how to solve the other tests, but I hope this can help you in some way :slight_smile: Probably someone else can help you with that!

-1 that’s cool :grinning: :grinning: :grinning:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.