I'll tell this to you the easy way, have you heard of HOC? Give it a read, and then come back to this answer. The state cannot be accessed from parent to child, it is always the other way round. It is like a water fall. State trickles down from the top and gets filtered the way down. This is the principle on which redux works by implementing it on a global scale. All you need to get this thing working is shift the state of the button to the parent state, create a function to change this state and pass it down to the button using props. Now, you can access the state in your parent component.
class Main extends Component{
constructor(props){
super(props);
this.state = {
isButtonOn: false,
}
}
toggleButton = () => {
this.setState((prevState)=>(
{
...prevState,
isButton: !prevState.isButtonOn,
}
)
)
}
render(){
return (
<div>
<div> {this.state.isOn?'Hello': 'Bye'} <div>
<Button toggleButton={this.toggleButton} isOn={this.state.isOn}/>
</div>
)
}
}