Css inline style as an attribute in React component

Question

I have custom component in which i map attributes. In this component I have label which have css class assigned. But i also want optional inline style for this label. The problem is that in react I need to surround inline style with curly braces and i can't escape them or set them correctly in component. How to resolve this?

Code from component:

const CustomComponent = ({items, name}) => (
    <fieldset>
        {items
            .map((item, index) => ({item, id: `${name || 'dod'}-${item.value || index}`}))
            .map(({item, id}) =>
                <div key={id}
                     className="className1">
                    <input
                        id={id}
                        name={name}
                        type="text"
                    />
                    <label htmlFor={id} className="className" style={item.style}>
                        {item.label}
                    </label>
                </div>
            )}
    </fieldset>
);

Code from rendered .jsx

  <CustomComponent             
       name="name"
       items={[{
           value: 'value',
           label: 'label',
           style: {{display: 'inline'}}      -> not working
       }]}
  />

Can you show us more code ? what is the type of item.style ? It must be an object literal ? if you are mapping, use key. — Noctisdark
– Noctisdark, Commented Feb 22, 2017 at 8:47

Noctisdark · Accepted Answer · 2017-02-22 09:24:27Z

1

You only need to include the first {} when you are directly inside a Virutal DOM Object. <... items={object} .../> and then object should be written exactly the same way as other Object Literals. That being said you need {display: 'inline'} instead of {{display: 'inline'}} in

<CustomComponent             
   name="name"
   items={[{
       value: 'value',
       label: 'label',
       style: {{display: 'inline'}}      -> not working //use {display: 'inline'}
   }]}
/>

I've made a pen for this in Codepen, you can check it Here.

edited Feb 22, 2017 at 9:24

answered Feb 22, 2017 at 9:22

Noctisdark

3483 silver badges18 bronze badges

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

1 Comment

Noctisdark Over a year ago

Glad to be of use.

ZEE · Accepted Answer · 2017-02-22 08:45:01Z

1

Your style property have to be an object literal, something like so :

item.style = {
 display: 'inline'
}

answered Feb 22, 2017 at 8:45

ZEE

5,8994 gold badges41 silver badges55 bronze badges

Comments

Abhishek · Accepted Answer · 2017-02-22 08:46:43Z

1

In react you can define your styles in form of JS objects, something like

  style: {{display: 'inline'}}

answered Feb 22, 2017 at 8:46

Abhishek

1,7242 gold badges16 silver badges27 bronze badges

Comments

J.B · Accepted Answer · 2017-02-22 09:45:19Z

0

You can abstract this further and have a JS file holding all the styles for your page:

const styles = {
  myElement: {
    display: 'inline'
  }
}

then in the code...

<Component style={styles.myElement} />

answered Feb 22, 2017 at 9:45

J.B

605 bronze badges

Collectives™ on Stack Overflow

Css inline style as an attribute in React component

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related