React: Cannot access index of an array in a state (index undefined)
<p>I have an array as a state property in my component, like this:</p>

<pre><code>this.state = { postData: [{id: 1, author: 'Mary'}, {id:2, author: 'John'}] }
</code></pre>

<p>When I access it through <strong>console.log</strong>, such as <code>this.state.postData[0]</code>, it shows the contents of the object and works correctly</p>

<p>But when I try to output it as a content of an element, this way:</p>

<pre><code>&lt;p&gt;{this.state.postData[0].author}&lt;/p&gt;
</code></pre>

<p>It says that <code>this.state.postData[0]</code> is undefined. I so far have not been able to find out why it happens, is there some special way to access arrays in React?</p>

<p><strong>EDIT: Additional info and context</strong></p>

<p>Initialization of the state:</p>

<pre><code>constructor() {

    super();

    this.state = { postData: '', end : '' };

    this.loadPosts = this.loadPosts.bind(this);

}
</code></pre>

<p>I am loading data, using AJAX, jQuery, this is the structure of the array that contains post information: (index.js)</p>

<pre><code>app.get('/requestPost/12', (req, res) =&gt; {
    var jsonPosts = { posts: [ {id:1, author: 'Mary', content: 'Hello, I am Mary'} ] };
    res.send(jsonPosts);
});
</code></pre>

<p>Then it is received and <code>postData</code> state now contains the <code>posts</code> array. </p>

<pre><code>loadPosts() {

    $.get('/requestPost/12').success( (data) =&gt; {

        this.setState({postData : data.posts });

    });

}

componentWillMount() {

    this.loadPosts();

}
</code></pre>

<p><strong>Render</strong> function. I noticed an occurence that when I display the <code>this.state.postData[0]</code> in console without trying to output it as the elements, it works. However, when I try to use it as an output, as <code>&lt;p&gt;{this.state.postData[0].author}&lt;/p&gt;</code>, it stops working in the console, too. Also, it does not work when I try to display in the console a property of the postData, like <code>console.log(this.state.postData[0].author)</code></p>

<pre><code>render() {

    console.log(this.state.postData[0]);

    return (

    &lt;div&gt;
        &lt;h1&gt;This is the blog we all like&lt;/h1&gt;
        &lt;p&gt;{this.state.postData[0].id}&lt;/p&gt;
        &lt;p&gt;{this.state.postData[0].author}&lt;/p&gt;
        &lt;p&gt;{this.state.postData[0].content}&lt;/p&gt;
        &lt;hr/&gt;
    &lt;/div&gt;  

    );

}
</code></pre>

<p>Thank you</p>