React

Programmatically Rendering Child Components

A quick overview on how to programmatically render components.

Eric Simons Up to date (Jun '17) React

Framing the problem

In our last post we had to manually create two instances of our Liquid component on separate DOM nodes (you can check out the code here). With a small number of components this is okay, but what if we had to spin up a hundred components that had different props being passed to each of them?

Iterating & rendering new components

This is actually a very common occurrence in React, and the way you solve it is by creating a parent component that iterates and instantiates components from an array. For example, lets create a “LiquidsList” component that accepts an array of objects. Then, we’ll iterate through each of those objects and will pass them to a <Liquid /> component:

var LiquidsList = React.createClass({
    render: function() {
        var liquids = this.props.liquids.map(function(liquidObject, index){
                        return <Liquid config={ liquidObject } key={ index } />;
                      })
        return (
            <div>
                { liquids }
            </div>
        );

    }
});

To make this work, we’ll remove all of our old ReactDOM initializations and replace it with this instead:

// Create object to hold water's name, freezing & boiling points
var water = {
    name: "Water",
    freezing: 32,
    boiling: 212
};

// Create object to hold ethanol's name, freezing & boiling points
var ethanol = {
    name: "Ethanol",
    freezing: -173.2,
    boiling: 173.1
};
// Render our LiquidsList component!
ReactDOM.render(<LiquidsList liquids={ [ethanol, water] } />, document.getElementById('container'));

As you’ll see from the working code, we get the same exact result as before — except now it’s trivial to add new liquids! Simply add a new object to the array being passed through the ‘liquids’ attribute and it will instantiate a brand new component.

The big idea here is that React components can include and instantiate other components, whether it be done statically or programmatically like we did here.

 

I finished! On to the next tutorial