Dynamic Instantiation of Child Components by String name - ReactJs

Question

I have an array that contains React Component string names ("SampleWidget1"); it's populated by an external mechanism. Within my DashboardInterface component, I'd like to consume that array, render the Components contained within it, and display it amongst other statically defined HTML in the DashboardInterface.render function. How can I do this in React?

Below is my attempt; there are no errors, but the rendered components are never actually successfully inserted into the DOM. If I manually add the SampleWidget1 into the DashboardInterface.render function () it displays as expected. If I do the same with the dynamically rendered component, it does not appear.

Any suggestions?

var widgetsToRender = ["SampleWidget1"];

/**
 * Dashboard that uses Gridster.js to display widget components
 */
var DashboardInterface = React.createClass({

    /**
     * Loads components within array by their name
     */
    renderArticles: function(widgets) {

        if (widgets.length > 0) {

            var compiledWidgets = [];

            // Iterate the array of widgets, render them, and return compiled array
            for(var i=0; i<widgets.length; i++){
                compiledWidgets.push(React.createElement(widgets[i] , {key: i}));
            }

            return compiledWidgets;

        }
        else return [];
    },

    /**
     * Load the jQuery Gridster library
     */
    componentDidMount: function(){

        // Initialize jQuery Gridster library
        $(".gridsterDashboard ul").gridster({
            widget_margins: [10, 10],
            widget_base_dimensions: [140, 140],
            //shift_larger_widgets_down: false
        });

    },

    render: function() {

        // Get the widgets to be loaded into the dashboard
        var widgets = this.renderArticles(widgetsToRender);

        return (
                <div className="gridsterDashboard">
                    <ul >
                        {this.widgets}
                        <SampleWidget1 />
                    </ul>
                </div>
        );
    }

});

Here is a sample component that I'm trying to render:

/**
 * Sample component that return list item that is to be insert into Gridster.js 
 */
var SampleWidget1 = React.createClass({

    render: function() {

        // Data will be pulled here and added inside the list item...

        return (
            <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">testing fake component</li>
        )

    }

});



ReactDOM.render(
  <DashboardInterface />,
  document.getElementById('dashboard')
);

kris_IV · Accepted Answer · 2018-12-07 12:47:11Z

2

for that you should import components and select desired, by key property

1 ) short example

import * as widgets from './widgets.js';

const widgetsToRender = ["Comp1","Comp2","Comp3"];

class App extends Component {
    render(){
        const Widget = widgets[this.props.widgetsToRender[0]] 
        return <Widget />
    }
}

2 ) Full example webpackbin DEMO

3 ) Example with multiple components

 renderWidgets(selected){
    return selected.map(e=>{
      let Widget =widgets[this.props.widgetsToRender[e-1]];
      return <Widget key={e}/>
    })
  }

webpackbin DEMO

edited Dec 7, 2018 at 12:47

kris_IV

2,4542 gold badges25 silver badges43 bronze badges

answered Jul 28, 2016 at 5:46

Kokovin Vladislav

10.4k5 gold badges41 silver badges36 bronze badges

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

6 Comments

ph34r Over a year ago

Thanks for the great example. I was trying to code this in legacy JavaScript as I haven't learned Es6 and the compiling workflow yet. Are you familiar with any resources that show an equivalent design in ES5?

Kokovin Vladislav Over a year ago

@ph34r i can rewrite it on es5. which one example do you want.and do you use modules? or you only need es5 react components

ph34r Over a year ago

Utro, I truly appreciate you're help, you've gone above and beyond. I've been banging my head trying to figure this out for several days, so as ES5 rendition of your third example would be tremendously helpful. I've been trying to only use ES5 react components.

Kokovin Vladislav Over a year ago

@ph34r variant with collection jsbin.com/jacujomayu/1/edit?js,output, and variant with array jsbin.com/gavijobuso/1/edit?js,output

ph34r Over a year ago

This is fantastic, exactly what I was trying to figure out - thank you so much! Looks like I was on the right track.

|

Collectives™ on Stack Overflow

Dynamic Instantiation of Child Components by String name - ReactJs

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related