import React, { Component } from "react";
import {
  MDBSelect,
  MDBSelectInput,
  MDBSelectOptions,
  MDBSelectOption,
} from "mdbreact";

class SelectPage extends Component {

  state = {
    select1: "",
    select2: ""
  }

  handleValueChange = (selectId, value) => {
    const select = `select${selectId}`
    console.log(select);
    this.setState({
      [select]: value
    })
  }

  render() {
    return (
      <>
      <div>
          <MDBSelect getValue={value => this.handleValueChange('1', value)}>
            <MDBSelectInput  selected="Choose your option" />
          <MDBSelectOptions>
            <MDBSelectOption disabled>Choose your option</MDBSelectOption>
            <MDBSelectOption value="1">Option nr 1</MDBSelectOption>
            <MDBSelectOption value="2">Option nr 2</MDBSelectOption>
            <MDBSelectOption value="3">Option nr 3</MDBSelectOption>
          </MDBSelectOptions>
        </MDBSelect>
        <label>Material Select</label>
      </div>

      <div>
          <MDBSelect getValue={value => this.handleValueChange('2', value)}>
            <MDBSelectInput  selected="Choose your option" />
          <MDBSelectOptions>
            <MDBSelectOption disabled>Choose your option</MDBSelectOption>
            <MDBSelectOption value="1">Option nr 1</MDBSelectOption>
            <MDBSelectOption value="2">Option nr 2</MDBSelectOption>
            <MDBSelectOption value="3">Option nr 3</MDBSelectOption>
          </MDBSelectOptions>
        </MDBSelect>
        <label>Material Select</label>
      </div>

        <h1>Select 1: {this.state.select1}</h1>
        <h1>Select 2: {this.state.select2}</h1>
      </>
    );
  }
}

export default SelectPage;