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?

Answer 1

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 .

Answer 2

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

Answer 3

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.

Answer 4

${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. Eg 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`]