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)}

gor181 · Accepted Answer · 2015-07-20 07:39:54Z

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.

answered Jul 20, 2015 at 7:39

gor181

2,0682 gold badges15 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Array of components in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related