Create react component dynamically

Question

Trying to render different components depending on arguments passed with data. If I use regular or React.createElement(Item) - it works fine, but all other options fail.

http://jsfiddle.net/zeen/fmhhtk5o/1/

var React = window.React;

var data = {items: [
{ itemClass: 'Item', id: 1, contentsHTML: '', text: 'Item 1'},
{ itemClass: 'Item', id: 2, contentsHTML: '', text: 'Item 2'},
{ itemClass: 'Item', id: 3, contentsHTML: '', text: 'Item 3'},
{ itemClass: 'Item', id: 4, contentsHTML: '', text: 'Item 4'},
{ itemClass: 'Item', id: 5, contentsHTML: '', text: 'Item 5'}
]};

var MyCatalog = React.createClass({
  getInitialState: function() {
    return { data: { items: [] } };
  },
  componentDidMount: function () {
    this.setState({ data: this.props.data });
  },

  render: function () {
    return (
      <div className="catalog">
        HELLO!!! I AM A CATALOG!!!

        <ItemList data={this.state.data}/>
      </div>
    );
  }
});

var ItemList = React.createClass({
  render: function () {
    console.log(this.props);

    var items = this.props.data["items"].map(function (itemData) {

    var klass = itemData['itemClass'] || 'Item';
    var ItemFactory = React.createFactory(klass);

    //return <ItemFactory key={itemData['id']} data={itemData}/> // no
    //return <klass key={itemData['id']} data={itemData}/> // no
    //return React.createElement(klass, { key: itemData['id'], data: itemData }); // no
    //return <Item data={itemData}/> // ok
    //return React.createElement(Item, { data: itemData }); // ok
    //return React.createElement('Item', { key: itemData['id'], data: itemData }); // no
    //return React.createElement(React.createFactory('Item'), { data: itemData }); // no, error
    var component = Components['itemClass'];
    return <component data={itemData} key={itemData['id']}/>    
  });

  console.log(items);
  return (
    React.createElement('div', { className: 'list' },
      React.createElement('div', null, 'And I am an ItemList :'),
        React.createElement('div', null, items)
      )

      /*<div className="list">
      <div>And I am an ItemList :</div>
      <div>
        {items}
      </div>
      </div>*/
    );
  }
});

var Item = window.Item = React.createClass({
  render: function () {
    return (
      <div className="item">
        <div>
          Regular item. Nothing special.
        </div>
          {this.props.children}
        </div>
      );
    }
  });

  var Components = { 'Item': Item };

  React.render( 
    <MyCatalog data={data}/>, 
    document.getElementById('app') 
  );

How can I manage this case for different types of components?

What is preventing you from using JSX notation in your `ItemList`? — E_net4, Jul 05 '15 at 20:23
When you say "passed as data" do you means as this.props.{propertyName] value? Why not just stick with using this.props.children and pass them in as child nodes - Which is after all a property. Or define a number of possible component type and then return a variable that isa component inside a swicth — Code Uniquely, Jul 05 '15 at 21:17

rojoca · Accepted Answer · 2015-07-06T22:03:17.467

53

This should work:

var component = Components[itemData['itemClass']]);
return React.createElement(component, {
    data: itemData,
    key: itemData['id']
});

You can't use JSX syntax like this <component .../> because when it gets transpiled component won't refer to anything.

UPDATE: Here is the updated ItemList component in full:

var ItemList = React.createClass({
    render: function() {
        console.log(this.props);

        var items = this.props.data["items"].map(function(itemData) {
            var component = Components[itemData['itemClass']];
            return React.createElement(component, {
                data: itemData,
                key: itemData['id']
            });
        });
        console.log(items);
        return (
            <div className="list">
                <div>And I am an ItemList</div>
                <div>{items}</div>
            </div>
        );
    }
});

You can see it working in this fiddle: http://jsfiddle.net/fmhhtk5o/3/

edited Jul 06 '15 at 22:03

answered Jul 05 '15 at 21:31

rojoca

11,040
4
45
46

should it work? I tried such variant, but it doesn't work, you can see commented code starts from line 44 – Dmytro Jul 06 '15 at 20:28
@Dmitry it works fine, see the update. I think your issue was you were using `Components['itemClass']` instead of `Components[itemData['itemClass']]` – rojoca Jul 06 '15 at 22:04
2

Be aware that the constructor for each screen will be called each time. – Oliver Dixon Dec 05 '17 at 18:18
Now createElement() is legacy and not recommended to use in newly written code. Is there any alternative? – saketha yellanki Jan 06 '23 at 05:13

score 13 · Answer 2 · answered May 02 '21 at 13:11

The accepted answer is not entirely accurate and it is overly complex.

You can't use JSX syntax like this <component .../> because when it gets transpiled component won't refer to anything.

Just capitalize the variable name to avoid this, ie.

const component = ({ChildClass}) => {
    return <ChildClass />
}

Create react component dynamically

2 Answers2

Linked

Related