React Question: How to access a component's state from different component

1

I’m currently doing the Drum Machine project (link: https://codepen.io/Crimson_Macaw/pen/NOmaXY?editors=1111) and I’ve created two components called App and DrumApp. App is the parent of DrumApp. What I’m trying to do is have the “handleClick” function from inside DrumApp access one of the state values from inside App.

Specifically, I want the “handleClick” function to check if state.power inside of App is false, and if it is, disable the “handleClick” function. I’ve tried accessing the state.power value from inside DrumApp but I can’t seem to do it. Nor can I figure out how I could rewrite the handleClick function and have it do the same job from inside of the App component directly.

I’d appreciate any and all help on this, because it ties in to another issue I have which is how to get the drumpad letters to switch between playing the “drums” audio and the “sounds” audio whenever I switch between the two on the left hand side of the app.

2

I think you want to pass the App power state down to DrumApp as a prop.

3

Yes that’s what I’m trying to do. How exactly would I do that? Everytime I write this.props.power in DrumApp it just gives a blank screen or an error.