Grouping variable number of elements with React / JSX

Question

I have a situation where I have a variable number of objects in an array, and I need to create groups of three. I know that to iterate over an array I can do something like this (Fiddle - https://jsfiddle.net/o5pbttjq/):

render: function() {
    var random = Array.apply(null, Array((Math.floor(Math.random() * (15 - 1) + 1) + 1))).map(Number.prototype.valueOf,0).map(function(d,i) {return i});

    return (
        <div>
            {random.map(function(d) {
                return <p>{d}</p>
            })}
        </div>
    );
}

I can also group them like so, but it's quite ugly (Fiddle - https://jsfiddle.net/Lxqm3tzo/):

render: function() {
    var random = Array.apply(null, Array((Math.floor(Math.random() * (15 - 1) + 1) + 1))).map(Number.prototype.valueOf,0).map(function(d,i) {return i});

    var content = "<div>";

    random.forEach(function(d, i) {
        if (i % 3 === 0 && i !== 0) {
          content += "</div><div>"
        }
        content += "<p>" + d + "</p>"
    })
    content += "</div>"
    return (
        <div dangerouslySetInnerHTML={{__html: content}}></div>
    );
}

How can I create groups of a variable number of objects with JSX?

Devin Spikowski · Accepted Answer · 2018-01-31 03:50:14Z

1

The following will work without having to set the innerHTML. See the fiddle here: https://jsfiddle.net/kuvvd513/8/

var Hello = React.createClass({
    render: function() {
        var random = Array.apply(null, Array((Math.floor(Math.random() * (15 - 1) + 1) + 1))).map(Number.prototype.valueOf,0).map(function(d,i) {return i});

        var allGroups = [];
        var group = [];
        random.forEach(function(d, i) {    
            if (i % 3 === 0 && i !== 0) {
                 allGroups.push(<div> {group} </div>);        
                 group = [];
            }
            group.push(<p> {d} </p>);
        }.bind(this));
        allGroups.push(<div> {group} </div>);

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

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

edited Jan 31, 2018 at 3:50

Devin Spikowski

2,9652 gold badges14 silver badges13 bronze badges

answered Aug 14, 2015 at 23:31

Mark

3,1631 gold badge20 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

Grouping variable number of elements with React / JSX

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