Select which component to render

form.jsx

const Beer = () => <div>
  <input name='$$abv' />
</div>

const Wine = () => <div>
  <input name='$$vintage' />
  <input name='$$appellation' />
</div>

class Form extends React.Component {
  submit = evt => {
    const json = {}
    for (let key in evt.target) {
      if (key.startsWith('$$'))
        json[key.slice(2)] = evt.target[key].value
    }
  }
  
  render() {
    return <form onSubmit={this.submit}>
      <Select name='$$type' from={{
         Wine, Beer, Soma,
         Cider: <Beer type="cider" />
      }} />
    </form>
  }
}

select-component.jsx

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" />
}} />