How to loop over a number in React inside JSX

Question

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?

Answer 1

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>

Answer 2

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>

Answer 3

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

Answer 4

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>

Answer 5

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>

Answer 6

This worked for me https://www.codegrepper.com/code-examples/javascript/react+loop+number+of+times

const n = 8;

{[...Array(n)].map((elementInArray, index) => ( 
    <div className="" key={i}> Whatever needs to be rendered repeatedly </div> 
    ) 
)}

Answer 7

you can use

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

Answer 8

If you don't mind adding a very common and useful library, you can use lodash and map in this situation and it will be nice and clean.

import _ from "lodash";

return (
    <ul>{_.range(1, 10).map(i => (<li>i</li>))}<ul>
)