A way to dynamically specify React.js components

Dynamic-React-Components.js

import React, { Component } from "react"

import OCFacetText from "./oc-facet-text"
import OCFacetNumber from "./oc-facet-number"
import OCFacetNumberRange from "./oc-facet-numberrange"
import OCFacetBoolean from "./oc-facet-boolean"
import OCFacetCheckbox from "./oc-facet-checkbox"
import OCFacetRadio from "./oc-facet-radio"
import OCFacetDate from "./oc-facet-date"
import OCFacetDateTime from "./oc-facet-datetime"
import OCFacetDateRange from "./oc-facet-daterange"
import OCFacetDateTimeRange from "./oc-facet-datetimerange"
import OCFacetSelect from "./oc-facet-select"

class OffCanvas extends Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {
        // Removed stuff that is not relevant
    }

    render() {
        let facetMap = {
              "text": OCFacetText,
              "number": OCFacetNumber,
              "numberrange": OCFacetNumberRange,
              "boolean": OCFacetBoolean,
              "checkbox": OCFacetCheckbox,
              "radio": OCFacetRadio,
              "date": OCFacetDate,
              "datetime": OCFacetDateTime,
              "daterange": OCFacetDateRange,
              "datetimerange": OCFacetDateTimeRange,
              "select": OCFacetSelect
          },
          facetComps = props.facets.map(function (f) {
              var CompName = facetMap[f.type]
              return <CompName key={f.id}
                               id={f.id}
                               data={f.data}
                               {...f.options} />
          })

        return (
          <div>
            {facetComps}
          </div>
        )
    }
}

OffCanvas.propTypes = {
    title: React.PropTypes.string,
    helperText: React.PropTypes.string,
    cancelText: React.PropTypes.string,
    submitText: React.PropTypes.string
};

OffCanvas.defaultProps = {
    title: "Filter",
    cancelText: "Clear",
    submitText: "Apply"
};

export {
  OffCanvas
}