const Chosed = (props) => {
  const elmt = React.useRef()
  
  React.useLayoutEffect(()=>{
    const $elmt = $(elmt.current)
    const handleChange = (e) => {
      props.onChange(e.target.value);
    }
    $elmt.chosen()
    $elmt.on('change',handleChange)
    $elmt.trigger("chosen:updated")
    $elmt.trigger("chosen:updated")
    
    return () => {
      $elmt.off('change', handleChange);
      $elmt.chosen('destroy');
      console.log("unmounted")
    }
  }, [props.children])
  
  return (
    <div>
        <select className="Chosen-select" ref={elmt}>
          {props.children}
        </select>
      </div>
  )
}
class Chosen extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);
    this.$el.chosen();

    this.handleChange = this.handleChange.bind(this);
    this.$el.on('change', this.handleChange);
  }
  
  componentDidUpdate(prevProps) {
    if (prevProps.children !== this.props.children) {
      this.$el.trigger("chosen:updated");
    }
  }

  componentWillUnmount() {
    this.$el.off('change', this.handleChange);
    this.$el.chosen('destroy');
  }
  
  handleChange(e) {
    this.props.onChange(e.target.value);
  }

  render() {
    return (
      <div>
        <select className="Chosen-select" ref={el => this.el = el}>
          {this.props.children}
        </select>
      </div>
    );
  }
}

function Example() {
  return (
    <>
    <Chosen onChange={value => console.log(value)}>
      <option>vanilla</option>
      <option>chocolate</option>
      <option>strawberry</option>
    </Chosen>
    <Chosed onChange={value => console.log(value)}>
      <option>vanilla</option>
      <option>chocolate</option>
      <option>strawberry</option>
    </Chosed>
      </>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById('root')
);