React Native: building a layout from data in an array - arrays

Question

So I have a layout on screen which duplicates itself multiple times. I really want to clean it up. Currently it's like this:
import { content } from '../content.js';
class Display extends Component {
render() {
return (
<View style={styles.displayContainer}>
<ScrollView>
<View style={styles.row}>
<View style={styles.displayItemBlock}>
<TouchableOpacity style={styles.displayItem} onPress={this.item1}>
<Image
style={styles.displayItemImage}
source={require('../images/display-item1.jpg')}
/>
<View style={styles.displayItemText}>
<Text style={styles.displayItemTitle}>{content.display_title_item1}</Text>
<Text style={styles.recipeItemTime}>
<IconMCI name="clock" color="#4F8EF7" /> 2h 30m
</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.displayItemBlock}>
<TouchableOpacity style={styles.displayItem} onPress={this.item2}>
<Image
style={styles.displayItemImage}
source={require('../images/display-item2.jpg')}
/>
<View style={styles.displayItemText}>
<Text style={styles.displayItemTitle}>{content.display_title_item2}</Text>
<Text style={styles.recipeItemTime}>
<IconMCI name="clock" color="#4F8EF7" /> 45m
</Text>
</View>
</TouchableOpacity>
</View>
{/* AND REPEAT... */}
</View>
</ScrollView>
</View>
);
}
}
So I thought I could easily replace most of this with a map which will take the information which changes and put that into an array. So now I have this:
import { content } from '../content.js';
const dataArray = [
{ img: '../images/display-item1.jpg',
title: 'content.display_title_item1',
func: 'item1',
time: '2h 30m' },
{ img: '../images/display-item2.jpg',
title: 'content.display_title_item2',
func: 'item2',
time: '45m' },
];
class Display extends Component {
ShowEverything() {
return dataArray.map(function (data, i) {
return (
<View key={i} style={styles.displayItemBlock}>
<TouchableOpacity style={styles.displayItem} onPress={this.{data.func}}>
<Image
style={styles.displayItemImage}
source={require({data.img)}
/>
<View style={styles.displayItemText}>
<Text style={styles.displaytemTitle}>{data.title}</Text>
<Text style={styles.displayItemTime}>
<IconMCI name="clock" color="#4F8EF7" /> {data.time}
</Text>
</View>
</TouchableOpacity>
</View>
);
});
}
render() {
return (
<View style={styles.displayContainer}>
<ScrollView>
<View style={styles.row}>
{this.ShowEverything()}
</View>
</Scroll>
</View>
);
}
}
What could be easier, right? :)
This, of course, doesn't work. The time (data.time) is output correctly, but the title doesn't pull the correct text from content.js (it just outputs the string content.display_title_item from the array). The img and func items also don't work as I would have expected.
Am I way off here? It seems like this is the most obvious way of keeping this DRY; any help would be appreciated.

Answer 1

Try this
import { content } from '../content.js';
const dataArray = [
{ img: require('../images/display-item1.jpg'), //this is a known issue in react, dynamic paths needs to assigned like this
title: 'display_title_item1',
func: 'item1',
time: '2h 30m' },
{ img: require('../images/display-item2.jpg'),
title: 'display_title_item2',
func: 'item2',
time: '45m' },
];
class Display extends Component {
ShowEverything() {
return dataArray.map((data, i) => { // changed to fat arrow func to be in scope of this
return (
<View key={i} style={styles.displayItemBlock}>
<TouchableOpacity style={styles.displayItem} onPress={this[data.func]}> // syntax error
<Image
style={styles.displayItemImage}
source={data.img}
/>
<View style={styles.displayItemText}>
<Text style={styles.displaytemTitle}>content[data.title]</Text> // syntax error
<Text style={styles.displayItemTime}>
<IconMCI name="clock" color="#4F8EF7" /> {data.time}
</Text>
</View>
</TouchableOpacity>
</View>
);
});
}