How to add a different item to an array based on the key of an array? - react-native

Question

I have this array that fetched from backend !
this is the array.
resultes
[
[front] [18:52:18] Object {
[front] [18:52:18] "cate_id": 1,
[front] [18:52:18] "name": "Vehicles",
[front] [18:52:18] },
[front] [18:52:18] Object {
[front] [18:52:18] "cate_id": 2,
[front] [18:52:18] "name": "Home",
[front] [18:52:18] },
[front] [18:52:18] Object {
[front] [18:52:18] "cate_id": 3,
[front] [18:52:18] "name": "Electronics",
},]
{this.state.categories.results.map((item ,key)=>(
<View key={key}>
<Text>{item.name}</Text>
</View> ))
How can add for every item.name a different icon based on the key of the array?
i tried to make an object
const CATEGORIES_TYPES = {
car: {
style: { width: 50, fontSize: 40, height: 60, color: '#f56217' }
},
home: {
style: { width: 50, fontSize: 40, height: 60, color: '#2c3e50' }
},
tv: {
style: { width: 50, fontSize: 40, height: 60, color: 'black' }
}
};
and in render:
{this.state.categories.results.map((item ,key)=>(
<View key={key}>
{CATEGORIES_TYPES[item.name] && (
<FontAwesome name={CATEGORIES_TYPES[item.name]} style={CATEGORIES_TYPES[item.name].style} />
)}
<Text>{item.name}</Text>
</View> ))
but that don't work Is this a method to add based on the key???

Answer 1

Use conditional rendering or have an object with the names of the icons and the name of category as their key.
const Icons = {
Home: 'home',
Electronics: 'microchip',
Vehicles: 'car',
};
Then in your render do
{this.state.categories.results.map((item, key) => (
<View key={key}>
{CATEGORIES_TYPES[item.name] && (
<FontAwesome
name={Icons[item.name]}
style={CATEGORIES_TYPES[item.name].style}
/>
)}
<Text>{item.name}</Text>
</View>
))}
also change your CATEGORIES_TYPES to look like the keys in your categories object.
const CATEGORIES_TYPES = {
Vehicles: {
style: { width: 50, fontSize: 40, height: 60, color: '#f56217' },
},
Home: {
style: { width: 50, fontSize: 40, height: 60, color: '#2c3e50' },
},
Electronics: {
style: { width: 50, fontSize: 40, height: 60, color: 'black' },
},
};
DEMO

Answer 2

I think this is what you want to do.
const styles = StyleSheet.create({
car: {
width: 50,
fontSize: 40,
height: 60,
color: '#f56217'
},
home: {
width: 50,
fontSize: 40,
height: 60,
color: '#2c3e50'
},
tv: {
width: 50,
fontSize: 40,
height: 60,
color: 'black'
}
});
{this.state.categories.results.map((item ,key)=>(
<View key={key}>
<FontAwesome name={item.name} style={item.name === "car" ? styles.car : item.name === "home" ? styles.home : styles.tv} />
<Text>{item.name}</Text>
</View> ))