In react can access parent state?

1

How to make power button to work?
There is a link:
https://codepen.io/dany05/pen/gZbbLQ?editors=0110

I try to execute handleClick() if active (from parent) is true but i don’t know that is possible.

2

You can pass parent state via props to child component, and use it, not change it tho. I mean you could pass function that does change state. Um for example if you have app component that has

this.state = {
  word: ""
}

and you want to change app state when something happend in child component you can make function that has something like

handleWord() {
  this.setState({
    word: "WE got it now!"
  })
}

And then pass handleWord to child component to be used for example on click…
Oh and don’t forget to bind handleWord. (your passing function)

In your case you would pass parent(app) state and then check if this.props.appState.active is true, if it is you execute your function.

Hope that was atleast somewhat helpful, and not THAT wrong, i am not 100% on this tbh. :slight_smile:

3

In parent app i have

  this.setState({
    word: "WE got it now!"
  })

when i press a button i change the word to "something"
In child component i have an another button. When i click on this button i want to see in console word: "something"

4

If you just want to access parent state you would simply pass parent state to child. i am not sure if that is what you are going for.

Um i think you could do something like… changing state after button is clicked and then use setState callback.
setState has callback option, which is called after state is changed, i think, so you could do your loging inside callback if that is an option.
Or if that is not, only thing that comes to my mind is to pass parent state and use it when that other button is clicked, like this:

<ChildComponent word={this.state.word}/>

And then log word in that child component in another function call

function() {
  console.log(this.props.word)
}
5

Sorry that maybe i don’t understand…
there is my code:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false
    };
    this.handlePower = this.handlePower.bind(this);
  }

 handlePower() {
    this.setState({
      active: !this.state.active
    });
  }


render() {
    return (    
	////  
            <div className="checkboxSwitch">
              <input
                type="checkbox"                
                onChange={this.handlePower}
              />
            </div>
	)}
}
	///

class DrumPad extends React.Component {

handleClick = () => {
    console.log(this.props.active); //undefinited ???
}

render() {
    return (
      <div
        className="drum-pad btn btn-info"
        onClick={this.handleClick}
      >      
      </div>
    );
  }
}
6

Its fine, its my lack of react knowledge and ability to explain, no worries.

Hm you’re passing onChange prop to input and not to DrumPad component, therefore DrumPad doesn’t know what onChange is.

Try to console.log(this.state) in DrumPad component and you’ll see.

For example for DrumPad to know what is onChange you would do something like this:

div className="checkboxSwitch">
              <input
                type="checkbox"                
                onChange={this.handlePower}
              />
              <DrumPad onChange={this.handlePower} />
 </div>