How to repeat an element n times using JSX

The shortest way to do this without any external libraries:

const n = 8; // Or something else[...Array(n)].map((e, i) => <span className="busterCards" key={i}>♦</span>)

javascript reactjs lodash

solution without lodash or ES6 spread syntax:

Array.apply(null, { length: 10 }).map((e, i) => (  <span className="busterCards" key={i}>    ♦  </span>));

javascript reactjs lodash

Here you go:

let card = [];_.times(8, () => {  card.push(<span className="busterCards">♦</span>);});

You may want to add key to each span element so React won't complain about missing the key attribute:

let card = [];_.times(8, (i) => {  card.push(<span className="busterCards" key={i}>♦</span>);});

For more info about .times, refer here: https://lodash.com/docs#times

CodeHunter