Optional attribute set with React JSX [duplicate]

Question

I'm about to make the next my page with React and I can't find how to put a configurable attribute set into component, for example:

<ProgressBar active now={current} max={total}/>

I want to add the active attribute inside the ProgressBar only if current == total.

How can I do this?

Is there an easy way to switch between two options active and stripped? Something like this:

<ProgressBar {current==total ? stripped : active} now={current} max={total}/>

except to create a properties object and spread it {...props}

Answer 1

If the component handles false values correctly, just always add the props:

let stripped = this.state.current === this.state.total;

 <ReactBootstrap.ProgressBar
   stripped={stripped}
   active={!stripped}
   now={this.state.current}
   max={this.state.total}
 ?>

If you absolutely have to pass one or the other, you could create an object and spread it into the element:

let props = {
  [this.state.current === this.state.total ? 'stripped' : 'active']: true,
  now: this.state.current,
  max: this.state.total,
};

<ReactBootstrap.ProgressBar {...props} />