html select with React + RxJS (livescript)

selector.ls

export mapchooser = (domToAttach)-->
    R = this.React
    observable = this.Rx.Observable.create((observer)->
        MapChooser = R.create-class do
            loadMaps: ->
                $.getJSON(
                    "maps",
                    $.proxy((data) !->
                        response = $.parseJSON(data)
                        @setState(maps: response)
                    ,this)
                )
            handleChange: (e)->
                selected = e.target.selectedOptions[0].value
                observer.onNext(selected)

            componentDidMount: !->
                @loadMaps!

            getInitialState: ->
                {maps: []}

            render: ->
                rows = []
                if \maps of @state
                    key = 0
                    @state.maps.map((x)->
                        rows.push(``<option value={x} key={key}>{x}</option>``)
                        ++key
                    )
                ``<select onChange={this.handleChange}>{rows}</select>``

        R.render do
            ``<MapChooser/>``
            domToAttach
    )



################
# use it from another module like this:
# The first argument would be the Dom element to add the selector to. It returns an RxJS observable
#################

$(!->
   mapchange = mapchooser($("#mapselector")[0])
   mapchange.subscribe((x) -> console.log(x))
)