Kreitzo Kreitzo - 3 months ago 8
React JSX Question

Have both JSX and normal className together

I have a css style class that needs to be in JSX form as it depends on the state, but I also need to use style class the ordinary way for styling. How do I combine these together?
I've tried

<span className={statusColor} className="uppercase">


Which only takes into account the last class one

<span className={statusColor uppercase}>


Which obviously looks for a variable called uppercase and errors out

<span className="uppercase {statusColor}">


Neither of them work

Below is a dummied-down version of my code. What is the correct way to do this?

const Component = React.createClass({
return {
completed: false
}
},
render () {
let statusColor;
this.state.completed === true ? statusColor = "green" : statusColor = "red";
return (
<div className="status-banner">
<span className="kata-text-status">Status: <span className={statusColor} className="uppercase">{this.state.completed.toString()}</span></span>
</div>
)
}
})

J F J F
Answer

Try this:

<span className={`uppercase ${statusColor}`}>

This will use an ES6 template string (`uppercase ${statusColor}`) and interpolate statusColor with ${...}.