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()?
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.
[...Array(10)].map((x, i) => <span key={i} ></span> ) :P, because op was trying to skip the loop
Array#fill is illusory, one will need a callback.
key here if possible as it's just for CSS animation purpose. but wondering if there's any shorter version for this dumb job.