react-native error with undefined is not an object - reactjs

Question

Lately i've been trying to link my js on component folder but suddenly the issue came out. The first issue is referrence error which occurs because i make typo mistakes on import section. But then ,on 2nd trial by running the emulator i got 'Type Error: Undefined is not an object (props.albums.title)'
Here's my Card.js
import React from 'react';
import { View } from 'react-native';
const Card = (props) => {
return (
<View style={styles.containerStyle}>
{props.children}
</View>
);
};
const styles = {
containerStyle: {
borderWidht: 1,
borderRadius: 2,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 2,
elevation: 1,
marginLeft: 5,
marginRight: 5,
marginTOp: 10
}
};
export default Card;
here is the AlbumDetail
import React from 'react';
import { Text } from 'react-native';
import Card from './Card';
const AlbumDetail = (props) => {
return (
<Card>
<Text>{props.album.title}</Text>
</Card>
);
};
export default AlbumDetail;
here is the AlbumList
import React, { Component } from 'react';
import { View } from 'react-native';
import axios from 'axios';
import AlbumDetail from './AlbumDetail';
class AlbumList extends Component {
state={ albums: [] };
componentWillMount() {
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then(response => this.setState({ albums: response.data }));
}
renderAlbums() {
return this.state.albums.map(album => <AlbumDetail key={album.title} record={album} />);
}
render() {
console.log(this.state);
return (
<View>
{this.renderAlbums()}
</View>
);
}
}
export default AlbumList;

Answer 1

You must catch the error 'undefined' which is generated by the array.You declare empty array in state.

Answer 2

renderAlbums(){
if(this.state.albums=='undefined'){
//handle Error
}else{
return this.state.albums.map(album => <AlbumDetail key={album.title} record={album} />)
}