map function doesn't work, when rendering data at React Native
const DataList = [
{
id: '1',
title: 'B',
name: 'Rulisa Andara',
phone: '+ 62 112 3456 2311',
},
{
id: '2',
title: 'C',
name: 'Tamara Amaris',
phone: '+ 62 112 0984 2456',
},
{
id: '3',
title: 'D',
name: 'Tania Sultan',
phone: '+ 62 234 4534 3464',
},
{
id: '4',
title: 'E',
name: 'Maria Tamani',
phone: '+ 62 999 1123 2345',
},
];
const list = () => {
return DataList.map(e => {
return (
<View style={styles.container} key={e.id}>
<InputSearching />
<View style={{margin: 20}}>
<View>
<Text>{e.title}</Text>
</View>
<View style={styles.wrapperList}>
<View style={styles.wrapperImageList}>
<Image style={styles.imageList} source={iconUser} />
</View>
<View>
<Text>{e.name}</Text>
<Text>{e.phone}</Text>
</View>
<View style={styles.wrapperOptionsList}>
<Text style={styles.optionsList}>...</Text>
</View>
</View>
</View>
</View>
);
});
};
return <View>{list()}</View>;
};
you dont need returns
const list = () => {
DataList.map(e => {
<View style={styles.container} key={e.id}>
<InputSearching />
<View style={{margin: 20}}>
<View>
<Text>{e.title}</Text>
</View>
<View style={styles.wrapperList}>
<View style={styles.wrapperImageList}>
<Image style={styles.imageList} source={iconUser} />
</View>
<View>
<Text>{e.name}</Text>
<Text>{e.phone}</Text>
</View>
<View style={styles.wrapperOptionsList}>
<Text style={styles.optionsList}>...</Text>
</View>
</View>
</View>
</View>
});
};
return <View>{list()}</View>;
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With