Bug: This isn't a bug but a feature request

[phtom]

React version: 17

This isn't a bug but a feature request that many devs would like to see in react including me.
For many times we have to use map funtion to loop items in a array just like the following:

exampleArray.map((index) => ( <motion.li key={index} className="item" variants={item} /> ))}

The sample above works great when we want to map an object, group of objects or arrays. There are some cases where we would like to do different. For example, in the code bellow I want inside JSX to loop 6 times a line of code:

{[0, 1, 2, 4, 5].map((index) => ( <motion.li key={index} className="item" variants={item} /> ))}

The code above seems off, we should be able to make a for cycle inside JSX. I would like to repeat the line 6 times to create 6 circles.

Do you think in future versions we could do it? Using this way doesn't seem great.

I wrote here because I didn't see any link pointing to feature or improvement request.

[titivermeesch]

I feel like this is more something that should go here ?

It would feel a little weird and against the syntax in my opinion to have a for loop directly inside JSX (if that is what you are asking).

Did you thought about a syntax like this?

export default function App() {
  const elements = [];

  for (let i = 0; i < 5; i++) {
    elements.push(<div key={i}>Item</div>);
  }

  return <div>{elements}</div>;
}

[phtom]

I feel like this is more something that should go here ?

It would feel a little weird and against the syntax in my opinion to have a for loop directly inside JSX (if that is what you are asking).

Did you thought about a syntax like this?

export default function App() {
  const elements = [];

  for (let i = 0; i < 5; i++) {
    elements.push(<div key={i}>Item</div>);
  }

  return <div>{elements}</div>;
}

That would work too, I was skeptic to it too. I know it isn't best practices but sometimes it could be usefull.

[yume-chan]

There are so many ways to create a range.

My personal favorite is

Array(6).fill().map((_,index)=>index)

[phtom]

There are so many ways to create a range.

My personal favorite is

Array(6).fill().map((_,index)=>index)

It looks like a good solution. I still think that we should be able to loop with a for cycle inside JSX, sometimes it could make sense to use.

[bvaughn]

This isn't the right repo to discuss this feature request, but there is another RFC / PR open that's related that I'll link to:
facebook/jsx#99 (and its predecessor facebook/jsx#98)

Going to close this issue out and suggest moving the conversation over to the other PR.