class Children extends Component {
	constructor(props) {
		console.log('CHILDREN - constructor', props);
		super(props);
		this.state = {
			message: '',
		}
		this.onClick = this.onClick.bind(this)
	}


	componentWillMount() {
		console.log('CHILDREN - componentWillMount()');
	}

	componentDidMount() {
		console.log('CHILDREN - componentDidMount()');

	}
	componentWillUnmount() {
		console.log('CHILDREN - componentWillUnmount()');
	}
	componentWillReceiveProps(nextProps) {
		console.log('CHILDREN - componentWillReceiveProps(nextProps)', nextProps);

	}
	shouldComponentUpdate(nextProps, nextState) {
		console.log('CHILDREN - shouldComponentUpdate(nextProps, nextState)');
		return true
	}
	componentWillUpdate(nextProps, nextState) {
		console.log('CHILDREN - componentWillUpdate(nextProps, nextState)');

	}
	componentDidUpdate(prevProps, prevState) {
		console.log('CHILDREN - componentDidUpdate(prevProps, prevState)');

	}

	onClick() {
		console.log('onClick');
		this.setState({
			message: 'state updated in children',
		});
	}

	render() {
		console.log('CHILDREN - render()');

		return (
			<div>
				<h3>Children</h3>
				<h5> props: {this.props.message} </h5>
				<h5> state: {this.state.message} </h5>
				<button onClick={this.onClick}> Modify State in children</button>
			</div>
		);
	}
}

class Parent extends Component {
	constructor(props) {
		console.log('PARENT - constructor', props);
		super(props);
		this.state = {
			message: ''
		}
		this.something = ''

	}


	componentWillMount() {
		console.log('PARENT - componentWillMount()');
	}

	componentDidMount() {
		console.log('PARENT - componentDidMount()');

	}
	componentWillUnmount() {
		console.log('PARENT - componentWillUnmount()');
	}
	componentWillReceiveProps(nextProps) {
		console.log('PARENT - componentWillReceiveProps(nextProps)');
	}
	shouldComponentUpdate(nextProps, nextState) {
		console.log('PARENT - shouldComponentUpdate(nextProps, nextState)');
		return true; // we are forcing to update.
	}
	componentWillUpdate(nextProps, nextState) {
		console.log('PARENT - componentWillUpdate(nextProps, nextState)');

	}
	componentDidUpdate(prevProps, prevState) {
		console.log('PARENT - componentDidUpdate(prevProps, prevState)');

	}

	onClick = () => {
		this.something = 'something'
		this.setState({
			message: 'Change State in Parent'
		});
		this.forceUpdate();
	}

	render() {
		console.log('PARENT - Render');

		return (
			<div>
				<h3>Parent</h3>
				{this.state.message}
				<button onClick={this.onClick}>Change State in Parent</button>
				<Children message={this.state.message} />
			</div>
		)
	}
}

ReactDOM.render(<Parent />, document.getElementById('root'));