Build a nested component in React

Question

New in React, looking for a good way to build a set of nested components given a nested props object.

Take the following basic props example:

const props = [{
  label: 'Foods',
  children: [
    { label: 'Chicken', children: [] },
    { label: 'Pasta', children: [] }
  ]
}];

I would like to use this to build a nested menu:

<Item>
  <Label>Foods</Label>
  <Item><Label>Chicken</Label></Item>
  <Item><Label>Pasta</Label></Item>
</Item>

While this is a simple example, the nesting would go much deeper.

I have searched around for this, and all I am finding are pre-built components. I'm not looking for magic yet, I'm trying to understand how things work before I use other components.

What is the best way to generate a React component to efficiently render this?

Austin Greco · Accepted Answer · 2016-05-05 00:26:00Z

3

You can have a component render itself. Here's a pure component example that should work:

const Item = ({label, children}) => (
  <div>
    <label>{label}</label>
    {children.map(child => (
      <Item label={child.label} children={child.children} />
    ))}
  </div>
);

answered May 5, 2016 at 0:26

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

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

Comments

Jack7 · Accepted Answer · 2016-05-05 00:35:19Z

Just adding to Austin's answer, it could be iterative to have as many children as needed.

var Container = React.createClass({
    render: function () {
        var Items = [];
        var level = 1;
        var self = this;

        var addItem= function (filter, level) {
            filter.forEach((f)=> {

                Items.push(<Item key={f.Id} data={f} level={level} />)

                if (f.Children !== undefined && f.Children.length != 0) {
                    addFiler(f.Children, level + 1);
                }
            });
            level -= 1;
        };

        addItem(this.props.options, level);

        return (<div>{Items}</div>);
    }
});

var Item= React.createClass({
    displayName: 'filter',
    onClick: function (e) {
        this.props.onChange(this.props.data.Id);
    },

    render: function () {
        return (<div>
                <label>
                    {this.props.data.Title}
                </label>
       </div>);
    }
});

Collectives™ on Stack Overflow

Build a nested component in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related