<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/superagent/3.6.3/superagent.min.js"></script>
    <script data-require="react@*" data-semver="0.14.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script data-require="react@*" data-semver="0.14.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="console"><h4>Console</h4></div>
    <div id="example"></div>
    <script src="script.js"></script>
  </body>

</html>
class CommentList extends React.Component {
   constructor(props) {    
        super(props);    
        this.state = { comments: [] }  
    }  
    componentDidMount() { 
      this.interval = setInterval(this.getComments.bind(this), 3000);
      //  this.getComments();
    }  
    getComments() {
      this.request = superagent.get('comments.json')
        .end((err, response) => {
          const data = JSON.parse(response.text);
          this.setState({comments: data.comments});
        }); 
    }
    render() {    
        return <div id="commentlist"><h3>Comments:</h3>
        <ul> {
            this.state.comments.map((comment, i) => <li key={i}>{comment.body}—{comment.author}</li>)
        }</ul></div>;  
    }
    componentWillUnmount () {
      clearInterval(this.interval);
      if (this.request) {
          document.getElementById('console').innerHTML += '<div>clearing request - typeof: '+(typeof this.request)+'</div>';
          this.request && this.request.abort();
          document.getElementById('console').innerHTML += '<div>aborted request</div>';
      }
    }
}
class CommentContainer extends React.Component {
  mount() {
    ReactDOM.render(
      <CommentList></CommentList>,
      document.getElementById('renderhere')
    );
  }
  unmount(){
       ReactDOM.unmountComponentAtNode(document.getElementById('renderhere'));
    }
    render(){
      return (
        <div>
        <button onClick={this.mount}>Mount</button>
        <button onClick={this.unmount}>Un Mount</button>
        <div id='renderhere'></div>
        </div>)
    }
}
ReactDOM.render(
  <CommentContainer />,
  document.getElementById('example')
);
#console {
  margin: 3px;
  padding: 3px;
  border: 1px solid #00f;
}
{"comments": [
  {"id": 1, "body": "Hey you","author": "Gullermo Shakespeare"},
  {"id": 2, "body": "What is happening?","author": "Aristotle"},
  {"id": 3, "body": "My cat is alive!","author": "Erwin Schroëdinger"}
  ]
}