So, how do we change from a PageView class to a PageEditor class? For that, we need to hook into browser events and fiddle with the state:
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {
"isEditing": false
};
}
render() {
if (this.state.isEditing) {
return <PageEditor
{...this.props}
onCancel={this.onCancel.bind(this)}
/>;
}
return <PageView
{...this.props}
onPageEdit={this.onEdit.bind(this)}
/>;
}
onEdit() {
this.setState({
"isEditing": true
});
}
onCancel() {
this.setState({
"isEditing": false
});
}
}We're providing a way for child components to call methods in parent components by passing down methods child components can use. When a PageView class wants to put the Page...