Dynamically nesting React.js components

Question

I'd like to create a flexible/dynamic JSX form format that can be rendered using React.js. This format has to include nested groups. A group can contain other groups as well as questions.

var Group = React.createClass({
    render: function(){
        return (
            <fieldset></fieldset>
        );
    }
});

var Text = React.createClass({
    render: function() {
        return (
            <label>
               <input type="text"/>
           </label>
        );
     }
});

React.render(
    <form>
        <Group>
           <Text/>
        </Group>
        <Text/>
    </form>,
    document.getElementById('container')
);

I want to produce:

<form>
    <fieldset>
        <label>
            <input type="text">
        </label>
    </fieldset>
    <label>
        <input type="text">
    </label>
</form>

However the <fieldset> element is not populated. The output just contains an empty <fieldset>.

How should I nest react.js components, and still maintain the flexibility of re-using question and group components at root and nested levels?

knowbody · Accepted Answer · 2015-03-12 23:10:37Z

29

When you nest React elements into other React elements in JSX, the parent element gets passed a children prop that contains the children elements. See Type of the Children props.

Another way to look at it is that <Group><div></div></Group> is the JSX equivalent to React.createElement(Group, null, React.createElement('div', null)), which is in turn equivalent to React.createElement(Group, {children: React.createElement('div', null)}).

So in your case, your Group component would look like:

var Group = React.createClass({
    render: function(){
        return (
            <fieldset>{this.props.children}</fieldset>
        );
    }
});

Note that the children props is an opaque data structure (it might be a single element or an array of elements depending on the input), so if you ever need to manipulate it, you should use the React.Children API.

edited Mar 12, 2015 at 23:10

knowbody

8,2966 gold badges48 silver badges70 bronze badges

answered Mar 12, 2015 at 22:27

Alexandre Kirszenberg

36.4k10 gold badges93 silver badges72 bronze badges

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

Comments

sbrk · Accepted Answer · 2016-12-18 19:14:48Z

2

If anyone else is having trouble debugging through this as well and just in case the top-voted answer doesn't work for them, the docs say that User defined components must be capitalized.
So in your case, if you import your fieldset controller as Fieldset instead, everything should work just fine.

answered Dec 18, 2016 at 19:14

sbrk

1,5101 gold badge19 silver badges33 bronze badges

Collectives™ on Stack Overflow

Dynamically nesting React.js components

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related