Dropdown

link - developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
This control provides a list in which the selected item is always visible while other items are visible on demand by clicking a drop-down button.
selectedKey - controlled
defaultSelectedKey - not controlled

codepen.io/dzearing/pen/YpVbYY

import * as React from 'react';  
import { Dropdown, DropdownMenuItemType } from 'office-ui-fabric-react/lib/Dropdown';  

import { DayOfWeek } from 'office-ui-fabric-react/lib/DatePicker';  

export class DropdownBasicExample extends React.Component<any, any> { 

  constructor(props) { 
    super(props); 

    this.state = { 
      value: null, 
      selectedItem: null, 

      firstDayOfWeek: DayOfWeek.Monday 
    }; 
  } 

  _onDropdownChanged(event) { 
        var newValue = event.key; 
        this.setState( { selectedItem: newValue} ); 
        console.log(newValue); 
  } 

  render() { 
    let { selectedItem } = this.state; 
    let { firstDayOfWeek, value } = this.state; 

    return ( 
      <div className='dropdownExample'>  

        <Dropdown 
          label='Select the first day of the week' 
          defaultSelectedKey={ DayOfWeek[firstDayOfWeek] } 
          options={ [ { text: 'Monday',     key: DayOfWeek[DayOfWeek.Monday] },  
                      { text: 'Tuesday',    key: DayOfWeek[DayOfWeek.Tuesday] },  
                      { text: 'Wednesday',  key: DayOfWeek[DayOfWeek.Wednesday] },  
                      { text: 'Thursday',   key: DayOfWeek[DayOfWeek.Thursday] },  
                      { text: 'Friday',     key: DayOfWeek[DayOfWeek.Friday] },  
                      { text: 'Saturday',   key: DayOfWeek[DayOfWeek.Saturday] },  
                      { text: 'Sunday',     key: DayOfWeek[DayOfWeek.Sunday] }  
                    ] 
          } 
          onChanged={ this._onDropdownChanged.bind(this) } 
        /> 

        <Dropdown 
          id='Basicdrop1'  
          placeHolder='Select an Option' 
          label='Basic uncontrolled example:' 
          ariaLabel='Basic dropdown example' 
          options={ 
            [ 
              { key: 'Header', text: 'Actions', itemType: DropdownMenuItemType.Header }, 
              { key: 'A', text: 'Option a' },  
              { key: 'B', text: 'Option b' },  
              { key: 'C', text: 'Option c' },  
              { key: 'D', text: 'Option d' },  
              { key: 'E', text: 'Option e' },  
              { key: 'divider_2', text: '-', itemType: DropdownMenuItemType.Divider }, 
              { key: 'Header2', text: 'People', itemType: DropdownMenuItemType.Header }, 
              { key: 'F', text: 'Option f' },  
              { key: 'G', text: 'Option g' },  
              { key: 'H', text: 'Option h' },  
              { key: 'I', text: 'Option i' },  
              { key: 'J', text: 'Option j' },  
            ] 
          } 
        /> 

        <Dropdown 
          label='Disabled uncontrolled example with defaultSelectedKey:' 
          defaultSelectedKey='D'  
          disabled={ true } 
          options={ 
            [ 
              { key: 'A', text: 'Option a' },  
              { key: 'B', text: 'Option b' },  
              { key: 'C', text: 'Option c' },  
              { key: 'D', text: 'Option d' },  
              { key: 'E', text: 'Option e' },  
              { key: 'F', text: 'Option f' },  
              { key: 'G', text: 'Option g' },  
            ] 
          } 
        /> 

        <Dropdown 
          label='Controlled example:' 
          selectedKey={ selectedItem && selectedItem.key } 
          options={ 
            [ 
              { key: 'A', text: 'Option a' },  
              { key: 'B', text: 'Option b' },  
              { key: 'C', text: 'Option c' },  
              { key: 'D', text: 'Option d' },  
              { key: 'divider_1', text: '-', itemType: DropdownMenuItemType.Divider }, 
              { key: 'E', text: 'Option e' },  
              { key: 'F', text: 'Option f' },  
              { key: 'G', text: 'Option g' },  
            ] 
          } 
          onChanged={ (item) => this.setState({ selectedItem: item }) } 
        /> 

      </div> 

    ); 
  } 

  makeList(items: any) { 
    let list = []; 
    for (let i = 0; i < items; i++) { 
      list.push({ key: i, text: 'Option ' + i }); 
    } 

    return list; 
  } 
}