Empty class name

Question

I have an example:

var myClass = '';
if (this.state.foo) myClass = 'active';
return (
   <div className={myClass}></div>
)

Or inside return:

return (
   <div className={this.state.foo ? 'active' : '' }></div>
)

If this.state.foo- falsein the browser, my code will look:

<div class></div>

Is it possible to add an attribute classif it is empty?

Answer 1

You could probably do

var props = {};
if (this.state.foo) {
  props.myClass = 'active';
}
return (
   <div {...props}></div>
);

Answer 2

You can return null instead of an empty string:

return (
   <div className={this.state.foo ? 'active' : null }></div>
)