import {h, Component} from 'preact';
import Select from 'preact-material-components/Select';
import 'preact-material-components/List/style.css';
import 'preact-material-components/Menu/style.css';
import 'preact-material-components/Select/style.css';

export default class SelectPage extends Component {
  render(){
    return (
      <div>
        <Select hintText="Select an option"
          selectedIndex={this.state.chosenIndex}
          onChange={(e)=>{
            this.setState({
              chosenIndex: e.selectedIndex
            });
            //selected options
            console.log(e.selectedOptions);
          }}>
            <Select.Item>opt1</Select.Item>
            <Select.Item>opt2</Select.Item>
            <Select.Item>opt3</Select.Item>
            <Select.Item>opt4</Select.Item>
        </Select>
      </div>
    );
  }
}