javascript - React JSX: selecting "selected" on selected option

In a React component for a 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.label}
    );
  });

// 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.label}

I also tried this:

var selected = (optionState === option.value) ? true : false;


{option.label}

Is there a recommended way of solving this?

Answer

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

{option.label}

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:


Apple
Banana
Cranberry



For more info, see the React select tag doc.