Hello fellow campers, I hope you’re all doing well.
So, the React drum machine challenge has been proving difficult for me, but after some trials and (many) errors, I managed to implement all the basic functionalities.
I cannot overcome an issue with the display component, though.
I need the string which describes the clip playing to last until the next click or keyDown event.
The string is derived from a state (drumKey) in the DrumMachine component, which maps (in the Display component) an array of objects that contains all the sounds data, thus returning the desired string.
I don’t know if this is a good approach, but I needed to set the drumKey state to null again right after a click or a keyDown, or it wouldn’t have been possible to play the same sound twice in a row, for the state wouldn’t have changed.
So what I’m trying to do in the Display component is to try and update the display only when props.drumKey !== null but for some reason this isn’t working. I thought it should be trivial, but I cannot make it work. What am I missing?
I think this is your real issue here. You shouldn’t have to go through all of these steps to get the same sound to play twice in a row. I would work on this instead and then your display problem will most likely disappear.
Components automatically re-render whenever their state changes or whenever their props change. So the conditional in your display will not prevent the component from updating because it will still re-render once its props change.
Looking at the docs, it seems that React.memo may be able to solve your problem. I do agree with bbsmooth, however. Getting the audio to play should not be tied to a change in state.
I understand. However here’s a perspective that might make you feel a bit better. The difficulty is from not having a clear grasp on the fundamentals,in this case react. When you do get through it, you’ll learn a lot more and that knowledge is going to be pretty solidly set in your mind.
Here’s something I do before starting a react app, hopefully it can help you. Before coding in whatever editor you got, first grab pen and paper and plot out how the app should work.
Boxes for each react component and what they should do, then arrows to represent data flow between them, forming a tree. General rule is I keep things as low on this tree as possible. Example: drumkey are the lowest level components and each could have its own audio file to play onKeyDown/onClick, while the audio file name is lifted up as a state then passed to display.