jsx style with condition

Question

I know I can do condition with className but how about style?

<span style={{float:'right'}}>Something</span>

Like for above jsx, I want to float right if obj.name is equal to 'active'

Possible duplicate of [How to CSS display:none within conditional with React JSX?](https://stackoverflow.com/questions/37728951/how-to-css-displaynone-within-conditional-with-react-jsx) — Shubham Khatri, Jun 07 '17 at 06:52

Gorka Hernandez · Answer 1 · 2017-06-07T09:18:55.593

2

You may also want to set this in the render method of the component. I personally think that this is a more readable solution overall:

render() {
    let customStyles = obj.name === 'active' ? { float: 'right' } : {};
    return (<span style={customStyles}>Something</span>);
}

You'll need to have obj in scope for this to work of course.

edited Jun 07 '17 at 09:18

answered Jun 07 '17 at 06:56

Gorka Hernandez

3,890
23
29

score 1 · Answer 2 · answered Jun 07 '17 at 06:50

One Way, if you want the whole style only when the object.name == 'active':

<span style={obj.name == 'active' ? {float:'right'} : {}}>Something</span>

Another, when you want to put the condition on separate style property values:

<span style={{float: obj.name == 'active' ? 'right' : ''}}>Something</span>

score 0 · Answer 3 · answered Jun 07 '17 at 11:48

You can follow the below mentioned Pattern.

reder(){
return(
let myStyle = {float:right; marginBottom:10;} //in JSX/JS hyphen sign is replaced with Camel case notation, it will automatically detected by ReactDOM renderer.
<span style={myStyle}></span>
);
}

for specifying any condition:

reder(){
return(
let myStyle = (obj.name == "active") ? {float:right; marginBottom:10;} : {};
<span style={myStyle}></span>
);
}

jsx style with condition

3 Answers3