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

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

can you please add what's in this.state.categories.results? btw, the key used here is just the index of each element in the array, like 0.. 1.. 2.. — mahmoudafer
– mahmoudafer, Commented Nov 2, 2019 at 17:07

Junius L · Accepted Answer · 2019-11-02 18:01:25Z

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

edited Nov 2, 2019 at 18:01

answered Nov 2, 2019 at 17:23

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

amani rose Over a year ago

Good Idea,Thank you

amani rose Over a year ago

Thank youuuuu very much

amani rose Over a year ago

Excuse me ! How can i make that if i press on any of these categories will navigate to different page ??

Junius L Over a year ago

add OnPress and navigate to your deisred screen.

amani rose Over a year ago

I know that but there is for each of categories a special screen!!!

hong developer · Accepted Answer · 2019-11-02 17:16:17Z

0

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

answered Nov 2, 2019 at 17:16

hong developer

13.9k4 gold badges46 silver badges73 bronze badges

8 Comments

amani rose Over a year ago

But i want also the name of the icon to be different like the style

hong developer Over a year ago

@amanirose Like my answer, three different icons are made, and each one has a different style.

hong developer Over a year ago

@amanirose And you try to organize your style in one place like my answer.

amani rose Over a year ago

Yes,,like your answer ,,but could we use the key because it is unique

hong developer Over a year ago

What is your key? You mean the date_id?

|

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related