Array of components in ReactJS

Question

Im make navigation on ReactJS, without plugins. And I want to create an array of main components. This is possible?

CoffeeScript:

Root = React.createClass
    render: ->
        self = this
        <header>
            <nav>
                <ul>
                    {this.props.components.map((comp, i) -> 
                        <li onClick={self.change.bind(self, i)}>{comp.name}</li>
                    )}
                </ul>
            </nav>
            {this.props.components[this.state.active].component}
        </header>

    change: (i) ->
        this.setState({active: i})

    getInitialState: ->
        active: 0

RootComponents = [
    {name: "main", component: React.createClass
        render: ->
            <div>its main</div>
    },
    {name: "conf", component: React.createClass
        render: ->
            <div>its conf</div>}
]


React.render(
    <Root components=RootComponents />, 
    document.getElementById("main")
);

This code returns items (main and conf) but not the component.

AGREED Edit: {this.props.components[this.state.active].component} To: {React.createElement(this.props.components[this.state.active].component, null)}

Answer 1

We usually use require for getting the components in place, then you can add them to an array and iterate:

var componentA = require('./componentA');
var componentB = require('./componentB');

var navigationComponents = [componentA, componentB];

render() {
    return(
        <div>
            _.map(navigationComponents, Component) {
                return <Component />;
            }
        </div>
    )
}

This is an non-coffee example.. but you get the point.