Hello I am creating a drum machine using react and I have created those 9 clickable elements with its id be it doesn t pass the test idk why? https://codepen.io/lolek55507/pen/QWYmjvg
1 Like
Hi
id=“drum pad”
The id will be the same for all input elements in the above code. Instead, id should be unique.
Also, I don’t think you need to the for loop inside the map function, because map function is already iterating over the array.
1 Like
yeah but I need different letters ah ok I read it wrong so the class has to be same
e should give you the letter
Yeah you are right I have made the loop because at first it was returning only "e"s for some reason and when I was treating it as an array it worked but now I changed it and it works
Hello I am creating a drum machine and instead of creating a html audio tag I created a javascript function that plays the sounds and checks the object for specific links but it doesn t pass the tests that way but it is working. So do I need to convert it or can I just submit it when I finish the project doing it my way? https://codepen.io/lolek55507/pen/QWYmjvg
I would prefer the 2nd way with the function because it looks easier to do and also it seems like I will be needing to type less code because I won t have to be creating a separated tags for the keyboard event listeners I would only need to loop through the object and trigger the function but if I do that it won t pass the tests.
It has to pass the tests. You should not submit it if it doesn’t.
It doesn’t matter if it is functionally correct, it must pass the requirements.
can I ask for suggestion how can I sensibly convert the code so it passes the requirements without breaking anything?
You can map the object with the audio files in the JSX.
{Object.values(sounds).map((audio) => (
<audio src={audio} />
))}
and add a ref to them so you can call play on each audio element. It is a little more work with an array of elements to add refs but the React docs has an example you can follow.
If you want to use plain DOM methods to play the audio (more brittle) it might be easier if you map the audio elements inside the buttons (because of the parent/child relationship). So each button has the related audio file inside it.
Move the static data structures out of the component.
I would keep all the useState definitions at the top of the component.
ok now I have an error when the volume is not set yet but it actually is in the useState but it returns an error which says that it is not finite. How may I fix it.
Give the initial state a value.
const [range, setRange] = React.useState(0.5);
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.