How can you assign and access references to multiple audio elements from a parent component two levels above the child when using React Hooks and Redux?

1

Hi,

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!

2

I figured out a different solution and updated the functional component Drum Machine project. I used Redux instead of the references solution. I thought I needed to use references because that is how I did the class component Drum Machine project.

Btw, am I using React Hooks and Redux in the updated functional components Drum Machine project properly?