<div id='root'></div>

body {
  font-family: Helvetica, Arial, sans-serif;
}

/*
 * Our animation test component
 */
class AnimateMe extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      animate: false,
    };
  }

  componentDidMount() {
    this.setState({ animate: true });
  }

  render() {
    return (
      <div
        style={ {
          background: '#eee',
          border: '1px solid black',
          height: this.state.animate ? 250 : 50,
          margin: 20,
          padding: 20,
          transition: 'all 2s',
        } }
      >
        Animate my height. 
        Read the <a href='https://stanko.github.io/react-rerender-in-component-did-mount/'>blog post</a>.
      </div>
    );
  }
}

/*
 * Render component
 */
ReactDOM.render(<AnimateMe />, document.getElementById('root'));