Looping the number inside array - React

Question

I have an array

let counterArray = [5];

I need to loop 5 times

{counterArray .map(counter=>
    <span>Counter- {counter}</span>
)}

This will just display the counter. How do i loop the counter?

For Suppose if i have

let counterArray = [15];

.map has to loop 15 times. Basically converting the number to loop. How to achieve this?

Jonas Wilms · Accepted Answer · 2018-03-23 06:31:17Z

3

Just build up an array of the given length and loop over that:

   Array.from({ length: counterArray[0] }, (_, i) => i)
    .map(counter => <Counter {counter} />)

Alternatively may just use a good old for loop:

  const res = [];

  for(let counter = 0; counter < counterArray[0]; counter++)
    res.push(<Counter {counter} />);

  return res;

answered Mar 23, 2018 at 6:31

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

Comments

gurvinder372 · Accepted Answer · 2018-03-23 06:31:48Z

3

let counterArray = [5];

will just create an array of single item with value 5

Use Array constructor here

let counterArray = [...new Array(5)].map( (s, i) => i );

This will create an array with value being the counter value - [0, 1, 2, 3, 4]

answered Mar 23, 2018 at 6:31

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Oh, building 3 temporary arrays. Sounds efficient :)

Littlee · Accepted Answer · 2018-03-23 06:38:37Z

1

I always use range from lodash

import { range } from 'lodash'
<div>
  {
    range(5).map((item, index) => (
      <div key={index}>{index}</div>
    ))
  }
</div>

answered Mar 23, 2018 at 6:38

Littlee

4,3656 gold badges34 silver badges66 bronze badges

Found this as pretty easiest one. Thanks