title: Reactjs: Jsx ternary inline of a component (nested ternaries)
body: <p>I have a react-bootstrap <code>&lt;Checkbox &gt;</code>.</p>
  
  <p>It looks like this:</p>
  
  <pre><code>&lt;Checkbox inline onClick={this.handleInclude}&gt; Include &lt;/Checkbox&gt;
  </code></pre>
  
  <p>On some occasions I want the Checkbox to be checked. The api suggests doing the following if you want it checked:</p>
  
  <p><code>&lt;Checkbox checked inline onClick={this.handleInclude}&gt; Include &lt;/Checkbox&gt;</code></p>
  
  <p>So now I only want to use the <code>checked</code> keyword during certain states.. so I tried using a ternary statement:</p>
  
  <pre><code>&lt;Checkbox 
    {this.state.chkbox === true ? "checked" : "" } 
    inline 
    onClick={this.handleInclude}&gt; 
       Include
   &lt;/Checkbox&gt;
  </code></pre>
  
  <p>But this throws an <code>Unexpected token</code> error. How are you supposed to do this with react?</p>
  
  <p><strong>EDIT:</strong> </p>
  
  <p>I neglected to mention that the checkbox is indeed wrapped in a ternary</p>
  
  <pre><code>{this.state.currentView == "timeline" ?
           &lt;Checkbox 
        {this.state.chkbox === true ? "checked" : "" } 
        inline 
        onClick={this.handleInclude}&gt; 
           Include
       &lt;/Checkbox&gt;
  : "" 
  }
  </code></pre>
  
  <p>I am getting a JSX token error while using the inner <code>{ }</code> tags in the ternary operator.</p>