Optional attribute with React JSX

Question

I am going to make my next page using React, and I cannot find how to add an optional attribute to a component, for example:

<ReactBootstrap.ProgressBar active now={this.state.current} max={this.state.total}/>

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

How can i do this?

Also, maybe there is an easy way to switch between the two parameters active and separated ? Sort of

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

Answer 1

If the component processes the values ​​correctly false, just add the details:

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

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

, :

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

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