map function loop when rendering with ReactJS and concat JSX syntax

Question

very simple question, when I loop through array when rendering react compnent with .map function, say:

render() {
        let board = this.props.board;

        return (
            <div>
                 {
                   board.map((piece,index) => {
                       return (
                           <Piece data={piece}/>
                       );
                   })
                 }
            </div>
        );
    }

I'm trying to add a break line every 5 pieces so (index % 5 == 0) add <br /> before the <Piece />
when I try to concatinate with + or to do something like this:

board.map((piece,index) => {
      return (
                (index % 5 == 0) ? <br /> : ''
                <Piece data={piece}/>
             );
})

I'm getting an output of matrix of [Object object]'s

Tomáš Hübelbauer · Accepted Answer · 2016-11-25 10:37:07Z

9

Return an array of [ <br />, <Piece> ] if the condition holds and return just the Piece component otherwise. See the fiddle.

The relevant piece of code is this:

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

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

Also, put key on the components you return from map or other ways that return array-like instances. This way, React doesn't need to take out all the generated components and replace them on each render, but can just find them under the key and update their attributes. Check out Reconciliation in React docs to learn more.

edited Nov 25, 2016 at 10:37

answered Nov 22, 2015 at 14:27

Tomáš Hübelbauer

11k17 gold badges76 silver badges146 bronze badges

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

3 Comments

Dima Gimburg Over a year ago

Thank you very much! That makes sense. A question I have in my head now, if I want to wrap every 5 items with a div, how do I do that?

Tomáš Hübelbauer Over a year ago

Please post a new question on Stack Overflow and link to it in a comment, I'll be happy to answer it.

Dima Gimburg Over a year ago

First of all here's a jsfiddle with a little fix so it work for objects and not only for array of numbers (just added the index to the map loop) jsfiddle.net/s048wnoc. and here is a link to my second question, stackoverflow.com/questions/33856949/… , thank you very much, appriciate it.

Collectives™ on Stack Overflow

map function loop when rendering with ReactJS and concat JSX syntax

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related