I'm getting two responses from a console.log() of my state in React. The first is empty, and the second contains the data I'm trying to print. 

> 
> [] empty array 
> 
> 
> [{…}] 0: {id: 1, date: "2011-07-01T10:30:30.000Z", name: "John"}
>  length: 1
>  **proto**: Array(0)
> 
> 
> 

My code is like the following:

```
constructor(props){
    super(props);
    this.state = {
        session: []
    }
}

componentDidMount(){
    this.fetchSessionData();
}

fetchSessionData = () => {
    fetch(`http://localhost:3000/sessions/${this.props.match.params.id}`)
    .then(response => response.json())
    .then(session => this.setState({session:session});
}

render() 
{
    console.log(this.state.session);
    return(
        <div>
            <p>Hello world + {this.props.match.params.id}</p>
        </div>
    )
}   

```

If there was more than one javascript object in my response, I would also also see something like:

> 
> [] empty array 
> 
> 
> [{…}] 0: {id: 1, date: "2018-11-01T10:30:30.000Z", name: "John"}
>  length: 1 **proto**: Array(0)
> 
> 
> [{…}] 0: {id: 1, date: "2018-11-01T10:30:30.000Z", name: "John"}, {id:
>  1, date: "2018-07-22T12:37:01.000Z", name: "Steve"}, length: 2,
>  **proto**: Array(0)
> 
> 
> 

So on and so forth. I suspect this to be related to Promises or lifecycle, but have failed to find an answer. Furthermore, when I try to access state values like `this.state.session.id`, it returns undefined. What's going on here?