Kreitzo Kreitzo - 1 year ago 106
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>

Answer Source

Try this:

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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download