Dynamically loading component using ReactJS?

Question

Here is my scenario. I am building a single page app with a body component containing a sidebar component (all written in JSX).

The render of the body component class looks like this:

return (
  <div>
    <SideBar onComponentChange={this.handleComponentChange}/>
    <div id="content-container">
      <LoadingContainer ref="loading_container"/>
    </div>
  </div>
);

When a user clicks on an item in the sidebar, it will trigger the handleComponentChange method in the body component class, which will 'look up' what component to load into the body, then have it render. I have a tag that I would like to place the component into. Any ideas on how to add the new component into the render?

Answer 1

The tag that you want to place the new component into should be a component itself. Something like 'ContentContainer', named more appropriately for whatever you are putting into it.

Your body component is going to have to contain state. That state should contain the data for whatever you are wanting to render inside of your ContentContainer. For example, if the component you want to add needs to display a Name and an Address, your body component needs to contain that data as state, and pass it down into your ContentContainer as props.

Now, when you click on something in the sidebar (which should be a child of your body component), it will update the state in the body with your new data. That new data will get passed down into your ContentContainer via props, automatically by react, and your component will change.

If you want to display a list of components inside the body, you would handle this in the same way, but clicking on the sidebar would append a new element into the state of the body, and your ContentContainer would be responsible for rendering a list instead of a single component.

Sample code:

var SideBar = React.createClass({
    handleClick: function (e) {
        this.props.handleClick("Dave");
    },
    render: function () {
        return <button id='sideButton' onClick = {this.handleClick}> Click me to change Bob to dave< /button>;
    }
});

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

var BodyComponent = React.createClass({
    handleClick: function(newData) {
        this.setState({data: newData}); 
    },
    getInitialState: function() {
        return {data: this.props.data};
    },
    render: function() {
        return <div><ComponentContainer name={this.state.data}/><SideBar handleClick={this.handleClick}/></div>;
    }
});



var originalName = {originalName: "bob"};

React.render(<BodyComponent data={originalName}/>, document.getElementById('content'));

If you wanted to add 'Dave' next to 'Bob' instead of replacing him, you could have ComponentContainer render a list instead of a single div, or have BodyComponent render a list of ComponentContainers. Either way, you would just maintain a list of names in your BodyComponent state.