Next.js Discord

Discord Forum

Mapping trough posts but I want to display another component every 7 posts

Answered
Rhinelander posted this in #help-forum
Open in Discord
RhinelanderOP
<div className="grid gap-x-6 gap-y-12 md:grid-cols-2 lg:grid-cols-3">
  {posts.data.map((post, index) =>
    (index + 1) % 6 === 0 ? (
      <Fragment key={post.id}>
        <NewsletterCard />
        <Card {...post.attributes} />
      </Fragment>
    ) : (
      <Card key={post.id} {...post.attributes} />
    ),
  )}
</div>

Is this the right aproach or should I make array and append to it
Answered by Rhinelander
{posts.data.map((post, index) => (
  <Fragment key={post.id}>
    {(index + 1) % 6 === 0 && <NewsletterCard />}
    <Card {...post.attributes} />
  </Fragment>
))}
View full answer

5 Replies

@Rhinelander ts <div className="grid gap-x-6 gap-y-12 md:grid-cols-2 lg:grid-cols-3"> {posts.data.map((post, index) => (index + 1) % 6 === 0 ? ( <Fragment key={post.id}> <NewsletterCard /> <Card {...post.attributes} /> </Fragment> ) : ( <Card key={post.id} {...post.attributes} /> ), )} </div> Is this the right aproach or should I make array and append to it
B33fb0n3
you can do it like you done, or if you don't want to replace the card, you can add the condition inside the jsx from your card (directly under it for example) and add the your component instead of replacing your card with it
RhinelanderOP
I don't understand you compleatly. With code above I am not replacing the card I am rather just ading extra component to it if certain conditions are met
Did you mean something like that
RhinelanderOP
{posts.data.map((post, index) => (
  <Fragment key={post.id}>
    {(index + 1) % 6 === 0 && <NewsletterCard />}
    <Card {...post.attributes} />
  </Fragment>
))}
Answer