For loop in react render method [duplicate]

Question

I want create paging link for my grid.I pass maxPages(number) property to component but i cant use for in render method. What can i do ?

var Pagination = React.createClass({

render: function(){


    return(
    <div class="text-center">
        <ul class="pagination">

            <li><a href="#">«</a></li>
            {for (var i=0;i <10;i++;)
            {
              return( <li><a href="#">i + 1 </a></li>);
            }
            }

            <li><a href="#">»</a></li>
        </ul>
    </div>);

}});

adeneo · Accepted Answer · 2015-04-25 00:07:12Z

36

You can run the loop before the rendering (note that there's an error in your for loop)

var lis = [];

for (var i=0; i<10; i++) {
    lis.push(<li><a href="#">{i + 1}</a></li>);
}

var Pagination = React.createClass({
    render: function(){
        return(
            <div class="text-center">
                <ul class="pagination">

                    <li><a href="#">«</a></li>
                    {lis}
                    <li><a href="#">»</a></li>
                </ul>
            </div>
        );
    }
});

FIDDLE

answered Apr 25, 2015 at 0:07

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

1 Comment

Brigand Over a year ago

Note that putting components outside of render and then using them in render will break some things in 0.13 (0.14 is changing this).

Community · Accepted Answer · 2017-05-23 12:10:10Z

10

You can only embed expressions into JSX.

<ul className="pagination">{children}</ul>

is converted to something like

React.createElement('ul', {className: 'pagination'}, children);

Do you see now how you could never have a for loop in place of children? Statements cannot be inside a function call expression.

You can create an array beforehand, like adeneo showed in their answer.

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Apr 25, 2015 at 0:08

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

5 Comments

adeneo Over a year ago

And strangely enough, running map works because it returns an array -> jsfiddle.net/adeneo/69z2wepo/7038

Felix Kling Over a year ago

Yes, because Array(10).join().split(',').map(...) is an expression :) React.createElement('ul', {className: 'pagination'}, Array(10).join().split(',').map(...)); is not a syntax error.

adeneo Over a year ago

Aha, so createElement accepts a single child, an array of children or text content, and any expression returning one of those are valid.

adeneo Over a year ago

This JSX converting stuff is clever !

Felix Kling Over a year ago

It is! It's just the right amount of magic :) (my personal opinion)

Collectives™ on Stack Overflow

For loop in react render method [duplicate]

2 Answers 2

1 Comment

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Linked

Related