Dynamically generate React components using a variable name

I struggled a bit to find an easy way to generate dynamic React component names using the JSX (CJSX to be specific) syntax, so I wanted to share a solution that worked for me. In my case I had a set of unique tables (as React components) to render based on the route and/or filters chosen.

This would be great, but given how JSX works, it doesn't work:

Tables =
  'active'    : require './tables/ActiveTasksTable'
  'scheduled' : require './tables/ScheduledTasksTable'
  'cleaning'  : require './tables/CleaningTasksTable'

TasksTable = React.createClass
  render: ->
    filter = @props.filterState
    table = Tables[filter] ## <-- e.g. Tables['active']
    <table tasks={@props.tasks} filter={filter} /> ## <-- does not work

The solution I found was to just skip the JSX and create the React element yourself:

Tables =
  'active'    : require './tables/ActiveTasksTable'
  'scheduled' : require './tables/ScheduledTasksTable'
  'cleaning'  : require './tables/CleaningTasksTable'

TasksTable = React.createClass
  render: ->
    filter = @props.filterState
    table = Tables[filter]
    React.createElement(table, { tasks: @props.tasks, filter: filter })  ## <-- success

Questions, comments, improvements?