React Native Flatlist rendering items - react-native

Question

I am not able to show my flatlist and I am not sure whether my coding is correct. There is no output if when I run this. It will only show a white screen. My data is correct which is this.props.section.songs. I want to show the title and artist in my text but I am unable to do that.
export default class SongList extends Component
{
renderSongsList() {
return(
<View>
<FlatList
data = {this.props.section.songs}
renderItem={(song, sectionId, rowId) => (
<TouchableOpacity onPress={ () => Actions.Player({songIndex: parseInt( rowId ),songs: this.props.section.songs, section: this.props.section }) }>
<View key={song} style={ styles.song }>
<Text style={styles.itemTitle}>
{ song.title}
</Text >
<Text style={styles.itemArtist}>
{ song.artist }
</Text>
</View>
</TouchableOpacity>
)}
/>
</View>
);
}
render()
{
return (
<View>
{ this.renderSongsList() }
</View>
);}}

Answer 1

export default class SongList extends Component
{
renderSongsList() {
return(
<View>
<FlatList
data = {this.props.section.songs}
// You have to cross check the values you receive here. Better is to receive a array item
//here and pass to the render props
// Or try {song, sectionId, rowId} this in place of (song, sectionId, rowId) see below
renderItem={({song, sectionId, rowId}) => (
<TouchableOpacity onPress={ () => Actions.Player({songIndex: parseInt( rowId ),songs: this.props.section.songs, section: this.props.section }) }>
<View key={song} style={ styles.song }>
<Text style={styles.itemTitle}>
{ song.title}
</Text >
<Text style={styles.itemArtist}>
{ song.artist }
</Text>
</View>
</TouchableOpacity>
)}
/>
</View>
);
}
render()
{
return (
<View>
{ this.renderSongsList() }
</View>
);}}

Answer 2

export default class SongList extends Component
{
renderItems(item){
// Here you can access all items of your json by item.property
// Like your JSON is { id: '1', title: 'Better Now', artist: 'Post Malone', }
// You can access these values as item.id, item.title etc
}
renderSongsList() {
return(
<View>
<FlatList
data = {this.props.section.songs}
renderItem={(item) => this.renderItems(item)}
/>
</View>
);
}
render()
{
return (
<View>
{ this.renderSongsList() }
</View>
);}}