Создание комбо выбора с опцией, уже выбранной в ReactTS

Question

Я динамически генерирую комбинированный список выбора в ReactTS и просто пытаюсь выяснить, как установить выбранный элемент на основе того, что находится в моем состоянии / реквизитах?

Мой код до сих пор генерирует поле выбора нормально, Я просто не знаю, как поставить соответствующую опцию как "selected", если она соответствует значению "selectedGroupingOption" в моих реквизитах

Мой класс

interface IGroupingProps {
    groupingOptions : string[],
    selectedGroupingOption : string
  }
class GroupingSelector extends React.Component<IGroupingProps, {}> {

      public render() {

       return (
        <div className="Grouping-selector">
            <div className="Horizontal-panel-right Grouping-search-combo">
                <select>
                    {this.props.groupingOptions.map((name, index)=> 
                        <option key={index}>{name}</option>
                    )}
                </select>
            </div>
            <div className="Content Horizontal-panel-right">
                Group by
            </div>            
        </div>);
    }


}

function mapStateToProps(state: any) {
    return {
      groupingOptions: state.groupingOptions,
      selectedGroupingOption: state.selectedGroupingOption
    };
  }    

Answer 1

[React] использует атрибут значения в корневом теге выбора.Это более удобно в контролируемом компоненте, потому что вам нужно обновить его только в одном месте.( source )

Итак, чтобы применить это к вашему коду:

 <select value={this.props.selectedGroupingOption}>
     {this.props.groupingOptions.map((name, index)=> 
         <option value={name} key={index}>{name}</option>
     )}
 </select>