import React from 'react'

class Select extends React.Component {
  state = {Selected: this.props.from[Object.keys(this.props.from)[0]]}
                   
  didChange = evt => this.setState({Selected: this.props.from[evt.target.value]})

  render() {
    const {from, name} = this.props
    const {Selected} = this.state
    return [
      <select onChange={this.didChange} name={name}> {
        Object.keys(from)
          .map(name => <option value={name}>{name}</option>)
      } </select>,
      Selected && (React.isValidElement(Selected) ? Selected : <Selected />)
    ]
  }
}

/// Usage:
import {Wine, Beer, Soma, Liquor} from '~/views'
<Select from={{
   Wine, Beer, Soma,
   Cider: <Beer type="cider" />
}} />