React JSX: selecting "selected" on selected <select> option

Question

In a React component for a <select> menu, I need to set the selected attribute on the option that reflects the application state.

In render(), the optionState is passed from the state owner to the SortMenu component. The option values are passed in as props from JSON.

render: function() {   var options = [],       optionState = this.props.optionState;    this.props.options.forEach(function(option) {     var selected = (optionState === option.value) ? ' selected' : '';      options.push(       <option value={option.value}{selected}>{option.label}</option>     );   });  // pass {options} to the select menu jsx 

However that triggers a syntax error on JSX compilation.

Doing this gets rid of the syntax error but obviously doesn't solve the problem:

var selected = (optionState === option.value) ? 'selected' : 'false';  <option value={option.value} selected={selected}>{option.label}</option> 

I also tried this:

var selected = (optionState === option.value) ? true : false;  <option value={option.value} {selected ? 'selected' : ''}>{option.label}</option> 

Is there a recommended way of solving this?

Answer 1

React makes this even easier for you. Instead of defining selected on each option, you can (and should) simply write value={optionsState} on the select tag itself:

<select value={optionsState}>   <option value="A">Apple</option>   <option value="B">Banana</option>   <option value="C">Cranberry</option> </select> 

For more info, see the React select tag doc.

Also, React automatically understands booleans for this purpose, so you can simply write (note: not recommended)

<option value={option.value} selected={optionsState == option.value}>{option.label}</option> 

and it will output 'selected' appropriately.

Answer 2

You could do what React warns you when you try to set the "selected" property of the <option>:

Use the defaultValue or value props on <select> instead of setting selected on <option>.

So, you can use options.value on the defaultValue of your select