Conditionally disabled select option in React

Question

I built my own React select component and would like to have an option to set the default value to be disabled

The component basically looks like this:

<select
    id={this.props.id}
    name={this.props.name}
    value={this.props.value}
    defaultValue={this.props.default}
    onClick={this.handleFieldClick}
    onChange={this.handleFieldChange} >

         <option value="" disabled={this.defaultDisabled ? true : false} >{this.props.defaultLabel}</option>

         { Object.keys(this.props.options).map((val, i) => ( 
             <option key={i} value={val}>{this.props.options[val]}</option>
         ))}

 </select>

This line giving me the issue is the following:

<option value="" disabled={this.defaultDisabled ? true : false} >{this.props.defaultLabel}</option>

The "disabled" option is still selectable and renders like this:

<option value="" selected="">Default Option</option>

I believe it's because the correct syntax for a disabled option is <option disabled ></option>, not <option disabled="true" ></option>

But when I format my JSX as follows:

<option value="" {this.defaultDisabled ? "disabled" : ""} >{this.props.defaultLabel}</option>

I get an error that crashes the app.

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?

Answer 1

You missed a .props. And you can also use null instead of false.

<option value="" disabled={this.props.defaultDisabled ? true : null} >{this.props.defaultLabel}</option>

Answer 2

After a couple of time, I finally fixed the issue.

It seems that in React to use selected attribute on the HTML tag is not recommended. The best ways to set a default value is to use defaultValue If you use it, it will throw an error in development and keep quiet in production.

More info can be found here

How to avoid such error

• Step one

  1. Give default value to HTML select Tag

     <select
       name="originId"
       defaultValue="Choose-origin"
     >

2. Give option tag the value which is equal to defaultValue of select

     <option
        value="Choose-origin"     // normally in VanillaJS you would use "selected"
        disabled
     >Choose origin</option>

3. Remember to disable the option tags so that you deny the user to click it.

Thanks, to @Neo Choi and @Bernard Leech for help.