null is not an object evaluating this.state.<name> - json

Question

The problem might be common but I am asking because I couldn't fix it. I am getting "null is not an object(evaluating 'this.state.albums')" at line 22
And also I am a bit not clear about the type of data that was returned after the call and how to handle it. Please, can someone help me in explaining this? I am in the learning phase. when I am directly alert the response.data I'm getting [object][object] I have to do JSON stringify to see the data. Why should we do this?
import React, { Component } from 'react';
import {Text} from 'react-native';
import axios from 'axios';
export default class AlbumList extends Component{
constructor(props) {
super(props);
state = { albums : []};
}
componentWillMount(){
console.log('in componentWillMount');
//debugger;
//alert("first"+this.state);
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then((response) => {
//console.log(response);
//alert(JSON.stringify(response));
this.setState({albums : response.data});
//alert(JSON.stringify(this.state.albums));
})
.catch((error) => {
alert(error);
});
}
renderAlbums(){
return this.state.albums.map( album => <Text>{album.title}</Text>); //line 22
}
componentDidMount() {
console.log('I was triggered during componentDidMount')
}
render(){
return(
<Text>{this.renderAlbums()}</Text>
//<Text>Hiii</Text>
);
}
}

Answer 1

You're missing this in your constructor.
constructor(props) {
super(props);
this.state = { albums : []};
}
As for the alert, you can't alert an object it has to be a string. So alerting a JSON object is just [object object]. If you use JSON.stringify it converts the object to a string that can be used for the alert. In your console you can log objects fine, and their structure is more readable. I would stick to console.log for debugging.