React: Children onclick to change parent's state for re-rendering
What you need to do is to pass a method from the parent to the child, That it can call when the button is clicked. This method that belongs to the parent will change the state.
In MainPage.js
changeButtonState(event) {
this.setState({btnNewScreen: !this.state.btnNewScreen})
}
pass this method to your child component as
<Mainpage_Addscreen buttonClick={this.changeButtonState.bind(this)} />
and finally in the child component,
<Button .... onClick={this.props.buttonClick} />
What you probably need is a callback function, which your parent passes as a prop to your child, and that your child can then call.
Something like this:
// In parent
constructor() {
...
this.onChildClicked = this.onChildClicked.bind(this);
}
onChildClicked() {
this.setState({childWasClicked : True });
}
render() {
...
return (
<div>
<Child onClicked={this.onChildClicked} />
</div>
)
}
// In child
render() {
...
return (
<div>
<button onClick={this.props.onClicked} />
</div>
)
}
PS: I notice that you have a capitalized <Button>
component. This is typically for components that you have defined yourself. Standard DOM elements take lowercase, e.g. <div>
, <p>
etc