React Native list view not displaying the data

Question

I am developing a simple React native iOS application just to learn React Native and this is my first react native app. Now, I am practising of using ListView. But seems like the items are loaded into list view but data are not displayed.

This is my reducer

import * as AlbumListActions from '../actions/AlbumListActions';

const defaultState = {
    albums: [ ],
    loading: false,
    message: null
}

export default albumListReducer = (state = defaultState, action) => {
    switch (action.type) {
        case AlbumListActions.ALBUMS_START_FETCHING_ALBUMS:
            return { ...state, loading: true, albums: [ ] }
            break;

        case AlbumListActions.ALBUMS_COMPLETE_FETCHING_ALBUMS:
            return { ...state, loading: false, albums: action.payload }
            break;

        case AlbumListActions.ALBUMS_CATCH_FETCHING_ALBUMS:
            return { ...state, loading: false, message: action.payload }
            break;

        default:
            return { ...state };
    }
}

This is my action

import Axios from 'axios';

export const ALBUMS_START_FETCHING_ALBUMS = "(albums) start fetching albums";
export const ALBUMS_COMPLETE_FETCHING_ALBUMS = "(albums) complete fetching albums";
export const ALBUMS_CATCH_FETCHING_ALBUMS = "(albums) catch fetching albums";

export const completeFetchingAlbums = (data) => {
    return {
        type: ALBUMS_COMPLETE_FETCHING_ALBUMS,
        payload: data
    }
}

export const catchFetchingAlbums = (data) => {
    return {
        type : ALBUMS_CATCH_FETCHING_ALBUMS,
        payload: data
    }
}

export const fetchAlbums = (data) => {
    return (dispatch) => {
        dispatch({
            type: ALBUMS_START_FETCHING_ALBUMS
        });

        return Axios.get("http://rallycoding.herokuapp.com/api/music_albums").then((response) => {
            dispatch(completeFetchingAlbums(response.data));
        }).catch((error) => {
            dispatch(catchFetchingAlbums("Unable to fetch data from the server"));
        })
    }
}

This is my component rendering list view.

class AlbumList extends React.Component {
    componentWillMount() {
        this.props.fetchAlbums();
    }

    renderAlbumItem = (album) => {
        return (
                <View style={styles.container}>
                    <Text>{album.title}</Text>
                </View>
            )
    }

    render() {
        return (
            <View>
            <FlatList
                data={this.props.albums}
                renderItem={this.renderAlbumItem}
                keyExtractor={(album) => album.title}
            />
            </View>
        )
    }
}

const mapStateToProps = state => {
    return state.albumList;
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return bindActionCreators({
        fetchAlbums : AlbumListActions.fetchAlbums
    }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);

When I run my app, it is not displaying anything. What is wrong and how can I fix it?

Answer 1

The signature for renderItem is wrong. It accepts an object that one of its properties is item which holds the album you're trying to render.

So to make it work, change renderItem as follows:

renderAlbumItem({item}) => {
    return (
            <View style={styles.container}>
                <Text>{item.title}</Text>
            </View>
        )
}

You can also rename item to album - renderAlbumItem({item: album}) . This syntax is called object destructuring, you can google for an explanation. In that case use {album.title} to access the title.