Using React to call Nested API?
<p>Say I had the following JSON file:</p>

<pre><code>{
"farmer": [
{
"crops": "corn"
}
],
"activities":{
"hobbies": "swimming"
},
"name: Todd"
}
</code></pre>

<p>I would like to know how to make calls to them using React. My best attempt is as shown below. </p>

<pre><code>componentDidMount: function(){
var selfish = this;
$.get('~~someurl~~', function(data){
selfish.setState(data);
});
},

render: function(){
return (&lt;div&gt;
&lt;p&gt;{this.state.name}&lt;/p&gt;
&lt;p&gt;{this.state.activities.hobbies}&lt;/p&gt;
&lt;p&gt;{this.state.farmer[0].crops}&lt;/p&gt;
&lt;/div&gt;)
}
</code></pre>

<p>I get that the first one <code>{this.state.name}</code> will run as it has been written. However, I am uncertain as to how to express the final two <code>{this.state.activities.hobbies}</code> and <code>{this.state.farmer[0].crops}</code> using the React syntax. </p>

<p>I have written them out in hopefully a way that expresses what I am trying to achieve with each call.    </p>

<p>EDIT: The specific error that results from the latter two state that they are undefined. </p>

<p>EDIT: So I got the second one working by adding an empty initial state.</p>

<pre><code>getInitialState: function(){
return {activities: '', farmer: ''}
}
</code></pre>

<p>However, this leaves the last one, which still returns an error. </p>