CODEWITHSUNDEEP
reactjsreact-native
Madhur Ahuja
Madhur Ahuja

Reputation: 22681

React Native - render a list

I have the following code snippet:

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';
import AlbumDetail from './AlbumDetail';

class AlbumList extends Component {
    state = { albums: [{}, {}, {}] };

    componentWillMount() {
        //console.log('componentWillMount in AlbumList');
        axios.get('https://rallycoding.herokuapp.com/api/music_albums')
            .then(response => this.setState({ albums: response.data }));
    }

    renderAlbums() {


        this.state.albums.map(album => {


            return (


                <Text key={album.title}>{album.title}</Text>
            );
        });
    }

    render() {
        const movies = this.state.albums.map(album => {


            return (

                <Text key={album.title}>{album.title}</Text>

            );
        });

        return (
            <View>
                {movies}
                {this.renderAlbums()}

            </View>
        );
    }
}

export default AlbumList;

The movie list should be printed twice, one because of the movies variable and other because of renderAlbums() call. However it is only printed once which is because of movies variable. renderAlbums() doesn't work. Any ideas ?

Upvotes: 0

Views: 3837

Answers (1)

bennygenel
bennygenel

Reputation: 24660

You need to do return in renderAlbums too.

renderAlbums() {
   return this.state.albums.map(album => {
        return (
            <Text key={album.title}>{album.title}</Text>
        );
    });
}

Upvotes: 5

Related Questions