creating albumDetail component & passing props with detail

Author: Rizwan Zaheer

App.js

@@ -12,6 +12,7 @@ import {
 import Header from './src/components/Header';
 import AlbumList from './src/components/AlbumList';
 
+
 const instructions = Platform.select({
   ios: 'Press Cmd+R to reload,\n' +
     'Cmd+D or shake for dev menu',

src/components/AlbumDetail.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import { View, Text } from 'react-native';
+
+class AlbumDetail extends Component {
+  render() {
+    const { title } = this.props.album;
+    return (
+      <View>
+        <Text>{title}</Text>
+      </View>
+    );
+  }
+}
+export default AlbumDetail;

src/components/AlbumList.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 import axios from 'axios';
+import AlbumDetail from './AlbumDetail';
 
 class AlbumList extends Component {
   state = {
@@ -15,10 +16,14 @@ class AlbumList extends Component {
       console.log('catch ', err);
     }));
   }
+  renderAlbums() {
+    return this.state.albums.map(album => <AlbumDetail key={album.title} album={album} />);
+  }
+
   render() {
     return (
       <View>
-        <Text> Album List </Text>
+        {this.renderAlbums()}
       </View>
     );
   }