ReactJS Array fill with key in JSX element

Question

I'm looking for the shortest approach to generate multiple JSX element. For example, if I need to generate 10 <span> I can easily use Array map function

{[...Array(10)].map((x, i) =>
    <span key={i} ></span>
)}

There's nothing wrong with the above approach but I want another shorter version like,

Array(10).fill(<span></span>);

However, React will shout about not having the unique 'key' props. does anyone have a clean solution without using the random()?

Answer 1

The Array(10).fill(<span></span>); solution has more problems than just the key: It uses the same span for each entry in the array, which is presumably not what you want.

You can use Array#from:

Array.from({length:10}, (_, i) => <span key={i}></span>);
// or
Array.from(Array(10), (_, i) => <span key={i}></span>);

It still uses a callback, but you're going to need that no matter what. It's slightly less verbose, and more efficient (not that it matters in 99.999% of cases), than the spread-and-map.