I'm currently trying to use the React style attribute to style React ponents 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 acplish this pls advise. Thanks.

I'm currently trying to use the React style attribute to style React ponents 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 acplish this pls advise. Thanks.

• javascript
• html
• css
• reactjs
• jsx

3 Answers 3

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

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

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',
        }
      : {}),
  }}
/>;

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';

2. Another approach is to use spread operator.

3. You can use styled ponent as well as it help in passing parameter dynamically in css file. For more reference to this, follow the link given below: https://styled-ponents./