There are a couple of tricks I want to show you before we wrap up. The first is a life cycle method we can use to tell when a component's properties will change. We can use this to change the appearance of a component, or refresh the internal state.
We can add this method to PageEditor, for example:
class PageEditor extends Component {
constructor(props) {
super(props);
this.state = {
"changed": false
};
this.bind(
"onCancel",
"onUpdate"
);
}
isChanged(next, previous) {
return JSON.stringify(next) !== JSON.stringify(previous)
}
componentWillReceiveProps(props) {
this.setState({
"changed": this.isChanged(props, this.props)
});
}
render() {
return <div>
<input
type="text"
name="title"
value={this.props.title}
onChange={this.onUpdate...