[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法

質問

私は、私が望むものを達成するために、私のアプリでReact/JSXを使用しています、また、Lodashも。

条件によってある要素を一定回数繰り返す必要があります。どのようにすればよいでしょうか？

ここにその要素があります。

<span className="busterCards">♦</span>;

と、こんな感じで割り振っています。

let card;
if (data.hand === '8 or more cards') {
  card = <span className='busterCards'>♦</span>;
}

ということで、この場合は、要素を繰り返す必要があります。 8 を何度も繰り返す必要があります。Lodashを使ってどのような処理をすればよいのでしょうか？

どのように解決するのですか？

はい、これです。

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

それぞれの span 要素に追加しておくと、React が key 属性の欠落について文句を言わないようになります。

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

の詳細については .times については、こちらを参照してください。 https://lodash.com/docs#times