CODEWITHSUNDEEP
react-native
amani rose
amani rose

Reputation: 121

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

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???

Upvotes: 1

Views: 41

Answers (2)

Junius L
Junius L

Reputation: 16152

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

Upvotes: 1

hong developer
hong developer

Reputation: 13924

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> ))

Upvotes: 0

Related Questions