Move logic into map in return part

Question

So I want to simplify this Code by moving it

for (let i = 0; i <= 15; i++) {
    const generationId: number = shuffeledIdArray[i];

    cards.push({
      element: (
        <Card
          randomId={generationId}
          hideShowCard={cardHideShowDefault}
          cards={shuffeledCards}
        />
      ),
      id: generationId.toString(),
      state: cardHideShowDefault,
      cards: shuffeledCards,
    });
  }

I want to move it down into this part

  return (
    <div className={styles.mainDiv}>
      <div className={styles.flexgameboard}>

        {cards.map((card, index) => ( //Around here//

          <div className={cardHideShowDefault} key={card.id}>
            {card.element}
          </div>
        ))}

So that I can get rid of the for loop and completetly rely on the map

I tried moving around and defining new Types but didnt found a Solution without another map/for which I dont want

Answer 1

A good way to simplify your code is to declare an array of length 16 and use it as follows:

return (
  <div className={styles.mainDiv}>
    <div className={styles.flexgameboard}>
      {new Array(16).fill(0).map((item, index) => {
        const cardId = shuffeledIdArray[index];

        return (
          <div className={cardHideShowDefault} key={cardId}>
            <Card
              randomId={cardId}
              hideShowCard={cardHideShowDefault}
              cards={shuffeledCards}
            />
          </div>
        );
      })}
    </div>
  </div>
);