title: React inline conditional component attribute
body: <p>I've been searching everywhere and can't find an answer to my question. So I want a conditional attribute which is only displayed on certain conditions, example:</p>
  <pre><code>&lt;Button {this.state.view === 'default' &amp;&amp; 'active'}&gt;&lt;/Button&gt;
  </code></pre>
  <p>As you can see I only want to indicate the button <em>active</em> if the <code>this.state.view</code> is equal to default. However, I get <code>Unexpected token, error...</code></p>
  <p>But when I try to put an attribute before it, for example:</p>
  <pre><code>&lt;Button isActive={this.state.view === 'default' &amp;&amp; 'active'}&gt;&lt;/Button&gt;
  </code></pre>
  <p>It passes the syntax error and displays fine but this is not what I wanted to achieve.</p>
  <p>How can I fix this? And what could be the reason behind it not passing?</p>
  <h2>UPDATE</h2>
  <p>So I just found out that in <code>react-bootstrap</code> the property <code>active</code> is a shorthand of <code>active=true</code> so I solved it using</p>
  <pre><code>&lt;Button active={this.state.view === 'default'}&gt;&lt;/Button&gt;
  </code></pre>
  <p>So In case, someone encounters this problem I'm leaving it here. However, I still want to know why the conditional attribute is failing without enclosing it inside a prop-like syntax, example:</p>
  <p>This:</p>
  <pre><code>active={this.state.view === 'default'}
  </code></pre>
  <p>Versus</p>
  <pre><code>{this.state.view === 'default' &amp;&amp; 'active'}
  </code></pre>