How to loop over a number in React inside JSX

user_8551819 0
Viewed 47894

I need to be able to loop over a number and return some jsx. For example

<ul>
 {for(i =0; i < 10; i++){
   return <li>{i}</li>
 }}
</ul>

This is not exactly what I want to do, but if I can solve this then I should be able to complete what I need to do. This however returns expression expected on the for. I have done some research and people say you can't use for loops inside of jsx because they do not return anything.

How do I go about looping over a number to return some amount of jsx?

reactjs javascript
7 Answers

You could use Array.from() instead.

let App = () => {
  return <ul>{Array.from(Array(10), (e, i) => {
    return <li key={i}>{i}</li>
  })}</ul>
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);
<script src="https://unpkg.com/react@16.1.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.1.0/umd/react-dom.development.js"></script>
<div id="app"></div>

You can also use ES6 spread syntax with map() method.

let App = () => {
  return <ul>{[...Array(10)].map((e, i) => {
    return <li key={i}>{i}</li>
  })}</ul>
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);
<script src="https://unpkg.com/react@16.1.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.1.0/umd/react-dom.development.js"></script>
<div id="app"></div>

user_46207710

You can do it like this :

createElements(n){
    var elements = [];
    for(i =0; i < n; i++){
        elements.push(<li>{i}</li>);
    }
    return elements;
}

<ul>
    {this.createElements(20)}
</ul>
user_23494070

You need to use recursive iterators such as map, forEach, filter etc. If you really need to do something like this you can

const statelessComp = props => {
    let arr = Array.apply(null, {length: 10}).map(Number.call, Number);
    return (    
        <ul>
            {arr.map(item => {
                return <li>{item}</li> 
            })}
        </ul>
    )
}

edit: these are the functions you should familiarize yourself with

user_83784190

This is the simple way

createElements(number){
    var elements = [];
    for(i =0; i < number; i++){
        elements.push(<div className="list-item">{i} - Some text or element</div>);
    }
    return elements;
}

In return statement

<div>
    {this.createElements(10)}
</div>
user_87253950
user_58272270

you can use

<ul>
   <li>{[...Array.from(Array(10).keys())].map((num, i) => <p key={i}>{num}</p>)}</li>
</ul>
user_168376660

What you can put as JSX children is a React.Node, for example it can be like this


// as array of jsx
<YourComponent>
  [
    <Child1/>,
    <Child2/>,
    <Child3/>
  ]
</YourComponent>

// text
<YourComponent>
  What a great day!
</YourComponent>


// or just another jsx
<YourComponent>
  <Child/>
</YourComponent>

so what i suggest, you either loop a value inside a function, and call that function inside the JSX so JSX will see the value.

such as

loopAndLoop(){
  // your looping here
  return yourReturnVal
}

<YourComponent>
  {/** call loopAndLoop here */}
  {loopAndLoop()}
</YourComponent>
user_107396020
Related