title: Conditionally disabled select option in React
body: <p>I built my own React select component and would like to have an option to set the default value to be <code>disabled</code></p>
  
  <p>The component basically looks like this:</p>
  
  <pre><code>&lt;select
      id={this.props.id}
      name={this.props.name}
      value={this.props.value}
      defaultValue={this.props.default}
      onClick={this.handleFieldClick}
      onChange={this.handleFieldChange} &gt;
  
           &lt;option value="" disabled={this.defaultDisabled ? true : false} &gt;{this.props.defaultLabel}&lt;/option&gt;
  
           { Object.keys(this.props.options).map((val, i) =&gt; ( 
               &lt;option key={i} value={val}&gt;{this.props.options[val]}&lt;/option&gt;
           ))}
  
   &lt;/select&gt;
  </code></pre>
  
  <p>This line giving me the issue is the following:</p>
  
  <pre><code>&lt;option value="" disabled={this.defaultDisabled ? true : false} &gt;{this.props.defaultLabel}&lt;/option&gt;
  </code></pre>
  
  <p>The "disabled" option is still selectable and renders like this:</p>
  
  <pre><code>&lt;option value="" selected=""&gt;Default Option&lt;/option&gt;
  </code></pre>
  
  <p>I believe it's because the correct syntax for a disabled option is <code>&lt;option disabled &gt;&lt;/option&gt;</code>, not <code>&lt;option disabled="true" &gt;&lt;/option&gt;</code></p>
  
  <p>But when I format my JSX as follows:</p>
  
  <pre><code>&lt;option value="" {this.defaultDisabled ? "disabled" : ""} &gt;{this.props.defaultLabel}&lt;/option&gt;
  </code></pre>
  
  <p>I get an error that crashes the app. </p>
  
  <p>What is the correct syntax for conditionally writing a directive value into a tag with JXS and/or conditionally set a disabled option in React?</p>