Looping in JSX files

Question

I am trying to render a dynamic list of elements using React, i.e. I have a javascript array elems = ['foo','bar'] and I would like to generate

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

I would like to do this purely in JSX. Is there any convenient way to do this (an "equivalent" of angular ng-repeat)?

possible duplicate of [loop inside React JSX](http://stackoverflow.com/questions/22876978/loop-inside-react-jsx) — Felix Kling, Jul 08 '15 at 08:24

score 4 · Accepted Answer · answered Jul 08 '15 at 08:28

4

The beauty of React/JSX is that you basically just write JavaScript. So if you have a list of things and want to create a list of components, just map the list:

<ul>
  {items.map(item => <li>{item}</li>)}
</ul>

(and it's also really concise with arrow functions)

answered Jul 08 '15 at 08:28

Felix Kling

795,719
175
1,089
1,143

Does the child always have to be an Array? Is there any way to say `var ul =
` and `var li =

neaumusic

Jul 22 '16 at 21:56

I think you can only add children to an existing React element by using `React.cloneElement`. But you can write `var ul =

{li};` or `var ul =

;`. – Felix Kling Jul 23 '16 at 08:06

score 0 · Answer 2 · answered Jul 08 '15 at 08:26

There is no pure JSX way to do this (that I know of). There is no equivalent to ng-repeat in React. But, JSX isn't really pure in the same way that Angular templates are. They compile down to JavaScript, after all.

The best way is to loop the JSX and add it to an array:

render: function() {
        var elems = ['foo','bar'];
        var listItems = [];
        for (var i = 0; i < elems.length; i++) {
            listItems.push(<li>{elems[i]}</li>);
        }
        return (
          <ul>
              {listItems}
          </ul>
        );
}

You still can use JSX inside the loop as you push into the array:

listItems.push(<li>{elems[i]}</li>);

Looping in JSX files

2 Answers2