jsx loop wrapper for html component on condition

Question

I want to wrap a ReactJS component with div, but I want to wrap the elemnt every 5 items only. I've managed (with little help) to add line break every 5 items.

here's the code:

var Item = React.createClass({
    render: function() {
        return <span> {this.props.num}</span>;
    }
});

var Hello = React.createClass({
    render: function() {
        var items = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19 ];

        return <div>{items.map(function (i,index) {
            if (index % 5 === 0) {
                return [ <br />, <Item key={i} num={i} /> ];
            }

            return <Item key={i} num={i} />;
        })}</div>;
    }
});

ReactDOM.render(
    <Hello name="World" />,
    document.getElementById('container')
);

here's a JSFIDDLE

i still want to use the .map function to loop through the array, it is more convenient and intuitive.

the question is how do I wrap it with a <div> and not <br> every 5 lines?

sorry for the confusion here is an explanation: wanted:

<div>0 1 2 3 4</div>
<div>5 6 7 8 9</div>

what I have:

0 1 2 3 4 <br />
5 6 7 8 9 <br />

I want to wrap a ReactJS component with div, but I want to wrap the elemnt every 5 items only. how do I do it right? — Dima Gimburg
– Dima Gimburg, Commented Nov 22, 2015 at 16:12
I still don't get it. Maybe desired vs. actual output structure would help. — m90
– m90, Commented Nov 22, 2015 at 16:13

Bart Riordan · Accepted Answer · 2015-11-22 18:09:13Z

5

Check out this JSFiddle. It breaks the input array into batches of five and wraps each of these batches in a div. These divs--each having five Item components as children--are all wrapped in another div, which is returned.

Here's the render function:

render: function() {
    var items = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 ];
    var fives = [];
    while(items.length) {
        fives.push(items.splice(0, 5));
    }
    return (
        <div>
            {fives.map(function (five, index) {
                return (
                    <div key={index}>
                        {five.map(function (item, index) {
                            return (<Item key={index} num={item} />);
                        })}
                    </div>
                );
            })}
        </div>
    );
}

edited Nov 22, 2015 at 18:09

Bart Riordan

4343 gold badges8 silver badges23 bronze badges

answered Nov 22, 2015 at 16:16

Tomáš Hübelbauer

11k17 gold badges76 silver badges146 bronze badges

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

1 Comment

Roby Cigar Over a year ago

clever solution!

Collectives™ on Stack Overflow

jsx loop wrapper for html component on condition

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related