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' : '';

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

Question author Cantera | Source



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.

However, 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>

More info at http://facebook.github.io/react/docs/forms.html#why-select-value.

Answer author Ben-alpert