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.

Simplified example: Here are 2 different widgets

var HelloWidget = React.createClass({
    render: function() { return <div>Hello {this.props.name}</div>; }
});

var HiWidget = React.createClass({
    render: function() {  return <div>Hi {this.props.name}</div>; }
});

As a user, I have chosen the HiWidget and my name is "dude" so when the system gets my preferences from the persistence layer it looks like this:

var dataFromDb = {
    type: 'HiWidget',
    name: 'dude'
};

How can I render a React component when I have its name in a string var ?

I tried this, based on Dynamically Rendering a React component :

React.render(
  <dataFromDb.type name={dataFromDb.name} />,
  document.getElementById('try2')
);

It used to work with React 0.11, but not anymore.

And I would like to avoid having a giant switch statement:

switch (dataFromDb.type) {
    case 'HiWidget':
        var component = <HiWidget name={dataFromDb.name} />;
        break;
    case 'HelloWidget':
        var component = <HelloWidget name={dataFromDb.name} />;
        break;
}
React.render(
  component,
  document.getElementById('try3')
);

JSFiddle with all this code here: http://jsfiddle.net/61xdfjk5/

Jonny Buchanan · Accepted Answer · 2015-03-22 14:07:46Z

16

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')
)

answered Mar 22, 2015 at 14:07

Jonny Buchanan

62.9k17 gold badges147 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vadim · Accepted Answer · 2015-03-22 14:33:02Z

3

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.

answered Mar 22, 2015 at 14:33

Vadim

8,7744 gold badges47 silver badges52 bronze badges

2 Comments

al8anp Over a year ago

I don't understand why window[...] is necessary here! The variable dataFromDb is in scope since dataFromDb.name works fine but if I remove the window[...] it doesn't work anymore.

Vadim Over a year ago

@al8anp You need window[...] because that way you get reference to class, dataFromDb.name is just a string representation of class name. React.createElement(...) expects class as first argument

Collectives™ on Stack Overflow

Render a React component based on its name

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related