title: Can't access object property on a React object state, even though it exists. Returns undefined
body: <p>I'm using AJAX to get some JSON, and then I want to display the value.  If I log out he object that contains the value I want to display, I can see the key and the value.  However, when I try to access the value directly, I get undefined.</p>
  
  <p>Here is the component that I am stuck on:</p>
  
  <pre><code>var WeatherCard = React.createClass({
    getInitialState: function () {
      return {};
    },
    componentDidMount: function() {
      var comp = this;
      $.get("http://api.openweathermap.org/data/2.5/weather?zip=" +  this.props.zipcode + ",us", function(data) {
      comp.setState(data);
    });
   },
   render: function() {
      // I want to get the value @ this.state.main.temp
  
      // this works...
      console.log(this.state.main);
  
      // this does not work...
      // console.log(this.state.main.temp);
  
      // I want "current temp" to display this.state.main.temp
      return (
          &lt;div className="well"&gt;
            &lt;h3&gt;{this.state.name}&lt;/h3&gt;
            &lt;p&gt;Current Temp: {this.state.main} &lt;/p&gt;
            &lt;p&gt;Zipcode: {this.props.zipcode}&lt;/p&gt;
          &lt;/div&gt;
       );
      }
  });
  </code></pre>
  
  <p>Here is the whole plunk.<br>
  <a href="http://plnkr.co/edit/oo0RgYOzvitDiEw5UuS8?p=info" rel="nofollow">http://plnkr.co/edit/oo0RgYOzvitDiEw5UuS8?p=info</a></p>