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?

React should handle boolean elements correctly, i.e. `` should render as ``, so it should behave as you want. When you say you're getting an issue from that, what issue exactly, and where is that issue coming from? — zkcro, Jul 04 '18 at 02:11
Looking at that again, you have an error in your code: `disabled={this.defaultDisabled ? true : false}` should be `disabled={this.props.defaultDisabled ? true : false}` (you missed a `.props`). Assuming that's coming directly from your code that would explain the issue. — zkcro, Jul 04 '18 at 02:22
godammit! you have no idea how many times Ive looked at that code and still missed it. thank you. — yevg, Jul 04 '18 at 02:25

Neo Choi · Accepted Answer · 2018-10-11T07:43:35.100

26

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>

edited Oct 11 '18 at 07:43

answered Jul 04 '18 at 02:11

Neo Choi

596
1
6
16

Why `null` and not `false`? – Menai Ala Eddine - Aladdin Feb 23 '23 at 14:01
1

@MenaiAlaEddine-Aladdin you can use null, but false works as well – Oygen87 Mar 27 '23 at 12:42

Niyongabo Eric · Answer 2 · 2020-01-18T18:42:10.917

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"
     >

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>

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

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

score 1 · Answer 3 · answered Jul 11 '19 at 10:55

1

This should work:

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

answered Jul 11 '19 at 10:55

Bernard Leech

756
7
14

Conditionally disabled select option in React

3 Answers3

How to avoid such error

Linked