How do I dynamically add styles to a React style attribute?

Question

I'm currently trying to use the React style attribute to style React components dynamically. The first styling condition using the attribute is working properly, however on the second condition I'm getting this error: "Parsing error: Unexpected token, expected "}"" Here is my code:

<input
  className="inputFieldComponent"
  id={field.name}
  type={field.type}
  value={value}
  disabled={(parentState.primaryVinRetrieved && field.name === 'makePrimary')
  || (parentState.primaryVinRetrieved && field.name === 'modelPrimary')
  || (parentState.secondaryVinRetrieved && field.name === 'makeSecondary')
  || (parentState.secondaryVinRetrieved && field.name === 'modelSecondary')}
  placeholder={field.placeholder}
  onChange={handleInputChange}
  style={
    field.currency && {
      paddingLeft: '10px',
    }
    field.name === 'makePrimary' && {
      color: 'grey',
    }
  }
/>

Basically I'm trying to chain additional conditionals into the style attribute. Not sure if this is the proper syntax for this. If there is a better way to accomplish this pls advise. Thanks.

Przemysław Zalewski · Accepted Answer · 2020-01-13 21:24:32Z

5

You can use the object spread operator - this works well with style objects composition:

style={{
  ...field.currency ? {
    paddingLeft: '10px',
  } : {},
  ...field.name === 'makePrimary' ? {
    color: 'grey',
    background: 'blue'
  } : {}
}}

answered Jan 13, 2020 at 21:24

Przemysław Zalewski

4,0261 gold badge25 silver badges25 bronze badges

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

Comments

felixmosh · Accepted Answer · 2020-01-13 21:25:47Z

1

You can conditionally spread objects.

<input
  className="inputFieldComponent"
  id={field.name}
  type={field.type}
  value={value}
  disabled={
    (parentState.primaryVinRetrieved && field.name === 'makePrimary') ||
    (parentState.primaryVinRetrieved && field.name === 'modelPrimary') ||
    (parentState.secondaryVinRetrieved && field.name === 'makeSecondary') ||
    (parentState.secondaryVinRetrieved && field.name === 'modelSecondary')
  }
  placeholder={field.placeholder}
  onChange={handleInputChange}
  style={{
    ...(field.currency
      ? {
          paddingLeft: '10px',
        }
      : {}),
    ...(field.name === 'makePrimary'
      ? {
          color: 'grey',
        }
      : {}),
  }}
/>;

answered Jan 13, 2020 at 21:25

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Comments

Mansi Teharia · Accepted Answer · 2020-01-13 21:50:18Z

1

You can simply add new properties in styles object as styles is nothing, it just an object, so you can add new properties like this:

var data = {}; data["property"] = 4;

So, in your code, you can use your style operator as:

style = { styles }

where, styles is:

let styles = {};
if(field.name === 'makePrimary') styles["color"] = 'grey';
if(field.currency) styles["paddingLeft"] = '10px';

Another approach is to use spread operator.
You can use styled component as well as it help in passing parameter dynamically in css file. For more reference to this, follow the link given below: https://styled-components.com/

answered Jan 13, 2020 at 21:50

Mansi Teharia

1,08711 silver badges11 bronze badges

Collectives™ on Stack Overflow

How do I dynamically add styles to a React style attribute?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related