execute a for loop inside a div, but giving error

Question

i tried to loop and execute a component inside react, but giving error. Map function is used when we have an array, but here i have a number and i want to execute a component 4 number of times.

Error it was giving is : "Parsing error: Unexpected token (61:23)"

<div>
(
for (var i=0; i <4; i++) {
       <StarIcon />
 }
)
</div>

Answered here - https://stackoverflow.com/questions/22876978/loop-inside-react-jsx?rq=2 — sharang, Aug 08 '23 at 02:16

score 0 · Accepted Answer · answered Aug 08 '23 at 02:19

0

There is a better way to display your stars :)

  <div>
    {Array.from({ length: 5 }).map((_, i) => (
      <StarIcon key={i} />
    ))}
  </div>

answered Aug 08 '23 at 02:19

iAugustozSatoshi

26
5

1

Already answered on the duplicate question: https://stackoverflow.com/a/29629588/215552 :) – Heretic Monkey Aug 08 '23 at 02:26

score 0 · Answer 2 · answered Aug 08 '23 at 02:36

In your form of approach this is how you can properly perform displaying the component you want in a loop.

const REPEATED_COUNTS = 4;

const components = [];
  for (let i = 0; i <= REPEATED_COUNTS; i++) {
    components.push(<Stars key={i} />);
 }
  return (
    ...
    <div>{components}</div>
  );
};

execute a for loop inside a div, but giving error

2 Answers2