How to add another variable value to a variable name in react.js

Question

    const healthItemStyle={
        backgroundColor:'green'
    };

    const warningItemStyle={
        backgroundColor:'yellow'
    };

    const errorItemStyle={
        backgroundColor:'red'
    };

    const scenario  = ['AppPulse Active','AppPulse Mobile','AppPulse Trace','BSM-Login','Service Portal'];
    const scenarioHealth  = ['health','warning','health','health','error'];

    const items=scenario.map((item,index)=>{
        return(
            <ListItem style={`${scenarioHealth[index]}ItemStyle`}>
                <ListItemText primary={item} secondary={scenarioHealth[index]}/>
            </ListItem>
        )
    });

As shown in the code above， I want to be able to dynamically generate the variable name of the tag style attribute. I have tried a lot, like ${scenarioHealth[index]}ItemStyle but obviously this doesn't work. So ask you any good way?

Bhojendra Rauniyar · Accepted Answer · 2018-12-04 07:29:13Z

2

Wrap them with bracket notation to use computed property and have all of the *ItemSyle in object:

const allStyles = {
  healthItemStyle: {...},
  ...
}

<ListItem style={allStyles[`${scenarioHealth[index]}ItemStyle`]}>

Here's just an example sandbox.

edited Dec 4, 2018 at 7:29

answered Dec 4, 2018 at 4:35

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

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

9 Comments

Dacre Denny Over a year ago

interesting - didn't know this was possible :)

1252748 Over a year ago

can you explain what's happening here a bit more please? thanks!

Bhojendra Rauniyar Over a year ago

@1252748 did you check the link attached in the post?

1252748 Over a year ago

yes. i'm aware of computed property names within objects, but it's like something else is happening here. maybe i am just too sleepy to latch on to it properly sorry.

Bhojendra Rauniyar Over a year ago

If you still din't get it then do: window['healthItemStyle']. So, it's just a property. Hope, this clears up things.

|

Dacre Denny · Accepted Answer · 2018-12-04 04:35:16Z

Perhaps you could collect you style options together into a single object, and then dynamically select those when rendering your <ListItem/> components like so:

const allStyles = {
  healthItemStyle : {
      backgroundColor:'green'
  },
  warningItemStyle : {
      backgroundColor:'yellow'
  }, 
  errorItemStyle : {
      backgroundColor:'red'
  }
};

const scenario  = [
  'AppPulse Active','AppPulse Mobile','AppPulse Trace','BSM-Login','Service Portal'
];
const scenarioHealth  = [
  'health','warning','health','health','error'
];

const items=scenario.map((item,index)=>{

    const styleKey = `${ item }ItemStyle`;
    const style = allStyles[ styleKey ];

    return(
        <ListItem style={ style }>
            <ListItemText primary={item} secondary={scenarioHealth[index]}/>
        </ListItem>
    )
});

dwjohnston · Accepted Answer · 2018-12-04 04:36:01Z

You're close.

Remember that the style property of a React component wants to be an object.

What you're doing here:

style={`${scenarioHealth[index]}ItemStyle`}>

is just setting it to be a string.

Instead, lookup a map of objects like so:

    const styles = {
      health: {
        backgroundColor:'green'
      },

      warning: {
         backgroundColor: 'yellow'
      }, 

      error: {
        backgroundColor: 'red'
      }
    }

    const scenario  = ['AppPulse Active','AppPulse Mobile','AppPulse Trace','BSM-Login','Service Portal'];
    const scenarioHealth  = ['health','warning','health','health','error'];

    const items=scenario.map((item,index)=>{
        return(
            <ListItem style={styles[scenarioHealth[index]]}>
                <ListItemText primary={item} secondary={scenarioHealth[index]}/>
            </ListItem>
        )
    });

Btw - you might want to take a look at react-jss which looks a lot like what you're doing here.

kaveh · Accepted Answer · 2018-12-04 04:36:49Z

0

${scenarioHealth[index]}ItemStyle gives you the correct string, but you need to access the value your variables are holding.

You can change the way your variables are defined. E.g. define one object named bgColors and map item to its color:

const bgColors = {
    healthItemStyle: 'green',
    warningItemStyle: 'yellow',
    errorItemStyle: 'red'
}

Then you can access the color like this:

bgColors[`${scenarioHealth[index]}ItemStyle`]

answered Dec 4, 2018 at 4:36

kaveh

2,1561 gold badge22 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to add another variable value to a variable name in react.js

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related