title: ReactJS beginner state updated but rendering in child not
body: <p>Bear with me beginner at ReactJS so I am testing stuff out.</p>
  
  <p>I created a static page as a component and in that component I load another custom component. </p>
  
  <p>The data is coming from an ajax call and I update the state but it doesn't update the child component's view.</p>
  
  <p>The static page</p>
  
  <pre><code>// Test.JS
  import React from 'react';
  import Layout from '../../components/Layout';
  import Article from '../../components/Article';
  import s from './styles.css';
  import axios from 'axios';
  
  class Test extends React.Component {
  
  constructor(props) {
      super(props);
      this.state = {
          article: null
      };
  
  }
  
  componentWillMount(){
      axios.get("https://gist.githubusercontent.com/koistya/a32919e847531320675764e7308b796a/raw/articles.json")
          .then(function(result) {
              var theArticle = result.data.filter((article) =&gt; article.title.split(' ').join('') === this.props.route.params.title.split(' ').join(''));
              this.setState({
                  article: theArticle[0]
              })
          }.bind(this));
   }
  
  render() {
      return (
          &lt;Layout className={s.content}&gt;
              &lt;Article {...this.state.article} /&gt;
          &lt;/Layout&gt;
      );
  }
  
  }
  
  export default Test;
  </code></pre>
  
  <p>As you can see i update the state with an ajax call but the child is not updated. the console log in Article is showing a null object because first time it renders there is nothing inside. But after updating the state I expect it should pass it through to the childeren.</p>
  
  <pre><code>import React from 'react';
  import Link from '../Link';
  
  class Article extends React.Component{
  
      componentDidMount() {
          console.log(this.props);
          window.componentHandler.upgradeElement(this.root);
      }
  
      componentWillUnmount() {
          window.componentHandler.downgradeElements(this.root);
      }
  
      render() {
          return (
              &lt;div className="demo-card-wide mdl-card mdl-shadow--2dp" ref={node =&gt; (this.root = node)}&gt;
                  &lt;div className="mdl-card__title"&gt;
                      &lt;h2 className="mdl-card__title-text"&gt;{this.props.author}&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div className="mdl-card__supporting-text"&gt;
                  &lt;/div&gt;
                  &lt;div className="mdl-card__actions mdl-card--border"&gt;
                  &lt;/div&gt;
                  &lt;div className="mdl-card__menu"&gt;
                      &lt;button className="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"&gt;
                          &lt;i className="material-icons"&gt;{this.props.title}&lt;/i&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      );
      }
  
  }
  
  export default Article;
  </code></pre>
  
  <p>So I have the following questions:</p>
  
  <p>1) First of all am I going the right direction is this how it should be done ?
  2) Is a constructer not better than willmount event ? 
  2) Why is it now not updating the child view ?
  3) Should I use a prop or state in this case (in Test.js) (still not sure after reading allot about it)</p>