I am currently redoing the Drum Machine project using React Hooks and Redux. The class component based Drum Machine the Drum Machine 56 With Web Audio API is not yet completed. It is poorly done because I manipulated the actual DOM, instead of the virtual one. I am probably abandoning it and will continue working on the functional component based Drum Machine with React Hooks and Redux 11.
I am having a hard time in the functional component based project passing references from the parent App component to the child DrumPad components, which are two levels deep and inside the DrumMachine component. This project passes all of the tests, but it does not work properly because each drum pad has to be tapped before it will respond to the keyboard. I want to create a keyboardPress() in the App component that will trigger the audio in the children DrumPad components two levels down using references. I do not want to put this in the DrumMachine component because I will also be creating a ThemePicker component that will be rendered inside the main App component. I want to put focus on the App component when the page first loads.
I do not want to use class components for this latest version of the project.
Btw, does my new Drum Machine follow the principles of React properly?
Thank you for your time and have a great day!