CODEWITHSUNDEEP
javascriptreactjsjsx
Melchia
Melchia

Reputation: 24314

Dom Crash react select option

React DOM stops working when <option> contains three interpolated value if one is a conditional.

Here is a fiddle: https://jsfiddle.net/0opjvycp/

Changing the value of the <select> crashes with NotFoundError: Node was not found

It's working fine on React 15, this only happens in react 16.2

Upvotes: 2

Views: 598

Answers (1)

Joshua R.
Joshua R.

Reputation: 2302

This is definitely a weird one.

If I replace your {isSelected && '(Y) '} with {isSelected ? '(Y) ' : ''} there's no problem. But in the latter case, the output is always a string.

It seems that React is unhappy re-rendering if you're changing <Option>'s children between false and string values. Maybe there's a new bug in DOM reconciliation.

Additionally, if your intent is to reset the store and select a single option for the menu on a change event, instead of doing:

this.setState({ 
              items: {
                      ...this.state.items,
                     [v]: true
                     }
              })

do something like:

this.setState({ 
              items: {
                      ...{a:false, b:false},
                     [v]: true
                     }
              })

As written, you never unselect an option.

Upvotes: 1

Related Questions