title: React Native - render a list
body: <p>I have the following code snippet:</p>
  
  <pre><code>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 =&gt; this.setState({ albums: response.data }));
      }
  
      renderAlbums() {
  
  
          this.state.albums.map(album =&gt; {
  
  
              return (
  
  
                  &lt;Text key={album.title}&gt;{album.title}&lt;/Text&gt;
              );
          });
      }
  
      render() {
          const movies = this.state.albums.map(album =&gt; {
  
  
              return (
  
                  &lt;Text key={album.title}&gt;{album.title}&lt;/Text&gt;
  
              );
          });
  
          return (
              &lt;View&gt;
                  {movies}
                  {this.renderAlbums()}
  
              &lt;/View&gt;
          );
      }
  }
  
  export default AlbumList;
  </code></pre>
  
  <p>The movie list should be printed twice, one because of the <code>movies</code> variable and other because of <code>renderAlbums()</code> call. However it is only printed once which is because of <code>movies</code> variable.  <code>renderAlbums()</code> doesn't work. Any ideas ?</p>