How do I insert a component within a MAP of other component in React?

Question

I am creating a MAP to loop through an array of objects and display the data using a Card component. But within that MAP I need to insert another component called Banner after the second Card element from the loop, then continue the Card loop after the Banner. So it will be something like:

card[0] - card[1] - banner[0] - card[2] - card[3]

This is my map:

    { CardData.map((item) => (
     <Card key={item.id} title={item.title} image={item.image} url={item.url} desc={item.desc} />
    ))}

My banner component looks like this:

    <Banner title="Sample Title" image="../images/sample.jpg" />

How would I be able to achieve this? Any help will be extremely appreciated! Thank you very much in advanced!

Answer 1

You can conditionally return the banner right before the card only if the index is 2:

{
  CardData.map((item, index) => (
    <>
      {index == 2 && <Banner title="Sample Title" image="../images/sample.jpg" />}
      <Card key={item.id} title={item.title} image={item.image} url={item.url} desc={item.desc} />
    </>
  ))
}