Render a React component based on its name

Question

Context: I am developing a widget-based webapp, (like the defunct iGoogle, where users can choose which widgets they want to display). Each widget is a React component.

Answer 1

You could use an object as a lookup for the component type and keep the details of rendering it in one place:

var components = {
  'HiWidget': HiWidget,
  'HelloWidget': HelloWidget
}

var Component = components[dataFromObj.type]
React.render(
  <Component name={dataFromObj.name}/>,
  document.getElementById('try3')
)

Answer 2

JSX is a superset of JavaScript, so you can always use native JavaScript syntax inside of JSX. For example, if classes of your components are available in global space (window), you can do the following:

React.render(
  React.createElement(window[dataFromDb.type], {name: dataFromDb.name}),
  document.getElementById('try2')
);

JSFiddle here.