class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fields: {
        message: ''
      },
      message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
    }
  }

  handleMessageChange = (e) => {
    this.setState({
      fields: {
        message: e.target.value
      }
    });
  }
  
  submitMessage = (e) => {
    e.preventDefault();
    this.setState({
      message: this.state.fields.message
    });
  }

  render() {
    return (
      <div>
        Enter new message: 
        <input type="text" value={this.state.fields.message} onChange={this.handleMessageChange} />
        <button onClick={this.submitMessage}>Save</button><br /><br />
        <ChildComponent message={this.state.message}/>
      </div>
    );
  }
}

let childComponentRenderCount = 0;

class ChildComponent extends React.Component {
  render () {
    childComponentRenderCount++;
    return (
      <div>
        The message is: {this.props.message}<br />
        Render count: {childComponentRenderCount}
      </div>
    )
  }
}

ChildComponent.propTypes = {
  message: PropTypes.string
}

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