dynamically_rendering_components2.js

import React from 'react'
import JobListing from './components/org.JobListing'
import JobHeading from './components/org.JobHeading'
import JobCard from './components/org.JobCard'

// well this is repetitive :/.... 
const renderAs = {
  listing (data) {
    return <JobListing data={data} />
  },
  heading(data) {
    return <JobHeading data={data} />
  },
  card (data) {
    return <JobCard data={data} />
  }
}

const Job = React.createClass({

  render () {
    const { data, renderAs } = this.props
    const renderFn = renderAs[renderAs]
    const content = renderFn ? renderFn(data) : ''

    return (
      <div className="Job">
        { content }
      </div>
    )
  }
})

export default Job