dynamically_rendering_components6.js

import style from './style'
import React, { PropTypes } from 'react'
import CSSModules from 'react-css-modules'
import createJob from 'JobFactory'
import listing from './components/org.JobListing'
import heading from './components/org.JobHeading'
import details from './components/org.JobDetails'
import card from './components/org.JobCard'

const DEFAULT_RENDER_TYPE = 'listing'
const renderAs = {
  listing,
  heading,
  details,
  card
}

const Job = React.createClass({

  propTypes: {
    data: React.object.isRequired,
    renderAs: React.string
  },

  /**
   * 1. Non-Alphabetic chars like '$' force JSX to recognize the variable as
   * a variable and use the variable value rather than the literal variable
   * name as a string.
   */
  render () {
    const { data, renderAs } = this.props
    const job = createJob(data)
    const renderType = renderAs.toLowerCase() || DEFAULT_RENDER_TYPE
    const $component = renderAs[renderType] /* [1] */

    return (
      <div styleName="Job">
        <$component data={job} />
      </div>
    )
  }

})

export default CSSModules(Job, style)