I'm using react to render data fetched from a API. My code looks like this:

```
var App = React.createClass({

getInitialState : function(){

  return {
      lists: []
  }  
},

componentDidMount: function(){

  fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent')
  .then(function(result){
        return  result.json();
    }).then(function(jsonResult){
        this.setState({
            lists: jsonResult
        });
    }.bind(this));  
  },

render: function(){
    console.log(this.state.lists);
    return(
        <div>{this.state.lists[0].username}</div>

        );
  }
});

ReactDOM.render(<App />, document.getElementById('container'));

```

I console.log (this.state.lists) in the render function and I got the whole data from the API, but when I render a part of the data, I got the 'Cannot read property 'username' of undefined ' error. If I set lists: [''] in the getInitialState function and render {this.state.lists[0].username}, it works but if I change the index to 1, I got the same error. I guess it has something to do with the lifecycle functions. But I can't figure it out. The data fetched from API looks like this[![enter image description here](https://i.stack.imgur.com/lJrVl.png)](https://i.stack.imgur.com/lJrVl.png)

I've been working on this for 3 hours. Hope someone could help me out. Much appreciated!