How to access mock data array inside FlatList react native - react-native

Question

export const Artists = [
{
name: "Breakbot",
songs: [
{
title: "Star Tripper",
album: "Still Waters",
},
{
title: "You Should Know (feat. Ruckazoid)",
album: "Still Waters",
},
]
},]
Above is mock data array which is defined in another file. And I have declared flatlist in another file.

Answer 1

SmapleScreen.js
import React, { Component } from 'react'
import { Text, View, FlatList, TouchableOpacity, RefreshControl } from 'react-native'
import { connect } from 'react-redux'
// Add Actions - replace 'Your' with whatever your reducer is called :)
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Fonts, Colors, Images, Metrics } from '../Themes'
import MockData from "./mockData"
// Styles
import styles from './Styles/OrdersScreenStyle'
class SampleScreen extends Component {
constructor(props) {
super(props);
this.state = {
}
}
componentWillMount() {
}
render() {
// console.log(this.props.order_details.new_orders,'refreshed' )
return (
(this.props.order_details.new_orders == null || this.props.order_details.new_orders.length == 0) ?
<View style={{ flex: 1, justifyContent: "center", backgroundColor: Colors.snow }}>
<Text style={{ alignSelf: 'center' }}>
You do not have any orders.
</Text>
</View>
:
<View style={{ flex: 1, flexDirection: 'column', justifyContent: "flex-start" }}>
<View style={{ padding: 10, flexDirection: 'row' }}>
<Text style={{ flex: 3 }}>Scheme</Text>
<Text style={{ flex: 2 }}>Amount</Text>
</View >
<FlatList
style={styles.container}
data={MockData}
keyExtractor={(item, index) => index}
renderItem={(item) => this.getOrderComponent(item)}
/>
<View>
<PrimaryButton label="Make Payment"
disabled={this.props.submitFetching} fetching={this.props.submitFetching} onPress={this.onMakePaymentClick} />
</View >
</View>
)
}
getOrderComponent=(item)=>{
return (
<View>
<Text>{item.name}</Text>
</View>
)
}
}
const mapStateToProps = (state, ownProps) => {
return {
}
}
const mapDispatchToProps = (dispatch) => ({
})
export default connect(mapStateToProps, mapDispatchToProps)(SmapleScreen)
MockData.js
const data =[
{
name: "Breakbot",
songs: [
{
title: "Star Tripper",
album: "Still Waters",
},
{
title: "You Should Know (feat. Ruckazoid)",
album: "Still Waters",
},
]
},
]
export default data