How to use the @material/select.MDCSelect function in @material/select

const elementRestaurantIdInput = document.getElementById('restaurant-id-input');
const elementRestaurantIdLabel = document.getElementById('restaurant-id-label');
// const elementNameInput = document.getElementById('name-input');
// const elementRestaurantRatingSelect = 
//   document.getElementById('restaurant-rating-select');
// const elementCommentsInput = document.getElementById('comments-input');

/**
 * Material Design
 */
const classRestaurantIdInput = 
  new MDCTextField(document.querySelector('.restaurant-id-input'));
const classNameInput = 
  new MDCTextField(document.querySelector('.name-input'));
const classRestaurantRatingSelect = 
  new MDCSelect(document.querySelector('.restaurant-rating-select'));
const classCommentsInput = 
  new MDCTextField(document.querySelector('.comments-input'));

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

/**
 * Start the following when the initial HTML document has been
 * completely loaded and parsed, without waiting for stylesheets, images,
 * and subframes to finish loading.
 * Fetch neighborhoods and cuisines.
 * https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
 */
document.addEventListener('DOMContentLoaded', (event) => {
  // Get restaurant id by using url parameter on current page.
  const id = getParameterByName('id');

(___)     (___)     (___)
                              Roma
   If you're checking out the console, maybe you want to contribute?
              Please do! https://github.com/TEIC/romajs
   `)

    this.props.clearUiData()
    const tabBar = new MDCTabBar(this.refs.tabs)
    tabBar.listen('MDCTabBar:change', ({detail: tabs}) => {
      this.updatePanel(tabs.activeTabIndex)
    })
    // Set start function to first option
    this.setState({selectedKnown: this.state.odds.urls[0]})
    this._updateCustomizationUrl()

    const select = new MDCSelect(this.refs.chooseodd)
    select.foundation_.setSelectedIndex(0)
    select.listen('MDCSelect:change', () => {
      const idx = this.state.odds.labels.indexOf(select.value)
      this.setState({selectedKnown: this.state.odds.urls[idx]})
      this._updateCustomizationUrl()
    })
  }

this.props.createNewDatatype(this.state.name, this.state.module)
          this.setState({canCreate: false})
          this.props.hide()
          this.dialog.close()
          this.props.navigateTo(`/datatype/${this.state.name}`)
          break
        case 'cancel':
        default:
          this.props.hide()
          this.dialog.close()
      }
    })
    this.dialog.listen('MDCDialog:opened', () => {
      this.dialog.layout()
    })
    const select = new MDCSelect(this.refs.module)
    select.listen('MDCSelect:change', () => {
      this.setState({module: select.value})
    })
    if (this.props.show) {
      this.dialog.open()
    }
  }

componentDidMount() {
    const tlSelect = new MDCSelect(this.refs.targetLang)
    switch (this.props.targetLang) {
      case 'en':
        tlSelect.foundation_.setSelectedIndex(0)
        break
      case 'de':
        tlSelect.foundation_.setSelectedIndex(1)
        break
      case 'es':
        tlSelect.foundation_.setSelectedIndex(2)
        break
      case 'fr':
        tlSelect.foundation_.setSelectedIndex(3)
        break
      case 'it':
        tlSelect.foundation_.setSelectedIndex(4)
        break

onBeforeFlow(initial: boolean) {
        const select = this.querySelector('.mdc-select');
        if (select) {
            this.selectInstance = new MDCSelect(select);
        }
    }

this.props.createNewClass(this.state.name, this.state.module, this.state.classType)
          this.setState({canCreate: false})
          this.props.hide()
          this.dialog.close()
          this.props.navigateTo(`/class/${this.state.name}`)
          break
        case 'cancel':
        default:
          this.props.hide()
          this.dialog.close()
      }
    })
    this.dialog.listen('MDCDialog:opened', () => {
      this.dialog.layout()
    })
    const select = new MDCSelect(this.refs.module)
    select.listen('MDCSelect:change', () => {
      this.setState({module: select.value})
    })
    if (this.props.show) {
      this.dialog.open()
    }
  }

mounted: function() {
    this.select = new MDCSelect(this.$el);
    this.select.listen('MDCSelect:change', this.onChange);
  }
};

componentDidMount() {
    const select = new MDCSelect(this.refs.usage)
    switch (this.props.attribute.usage) {
      case 'def':
        select.foundation_.setSelectedIndex(0)
        break
      case 'req':
        select.foundation_.setSelectedIndex(1)
        break
      case 'rec':
        select.foundation_.setSelectedIndex(2)
        break
      case 'opt':
        select.foundation_.setSelectedIndex(3)
        break
      default:
        select.foundation_.setSelectedIndex(0)
    }

this.props.createNewElement(this.state.name, this.state.module, this.state.ns)
          this.setState({canCreate: false})
          this.props.hide()
          this.dialog.close()
          this.props.navigateTo(`/element/${this.state.name}`)
          break
        case 'cancel':
        default:
          this.props.hide()
          this.dialog.close()
      }
    })
    this.dialog.listen('MDCDialog:opened', () => {
      this.dialog.layout()
    })
    const select = new MDCSelect(this.refs.module)
    select.listen('MDCSelect:change', () => {
      this.setState({module: select.value})
    })
    if (this.props.show) {
      this.dialog.open()
    }
  }

componentDidMount() {
    const valList = this.props.attribute.valList || {}
    if (this.props.setValListType) {
      const select = new MDCSelect(this.refs.usage)
      switch (valList.type) {
        case '':
          select.foundation_.setSelectedIndex(0)
          break
        case 'closed':
          select.foundation_.setSelectedIndex(1)
          break
        case 'semi':
          select.foundation_.setSelectedIndex(2)
          break
        case 'open':
          select.foundation_.setSelectedIndex(3)
          break
        default:
          select.foundation_.setSelectedIndex(0)
      }