Why can't I use my card parameter in React component with PortableText?

The issue is that you're not using the card parameter from your .map() function - you're referencing data[0].card instead, which means you're always rendering the same card content for every item in your array.

Here's the fix:

{cards.map((card, index) => {
  return (
    <Card position={{ top: "top-[200px]", left: "left-0" }}>
      <PortableText
        value={card}  // Use the 'card' from map, not data[0].card
        components={portraitPortableTextComponents}
      />
    </Card>
  )
})}

What was wrong:

• cards.map((card, index) => {...}) gives you each individual card item as you iterate
• But inside, you were using data[0].card, which always points to the same card in your data array
• This means every iteration rendered the same content

Additional tips:

1. Add a key prop - React needs this for list rendering:

   <Card key={index} position={{ top: "top-[200px]", left: "left-0" }}>

   Or better yet, if your cards have unique IDs: key={card._id}

2. Check your data structure - Make sure cards actually contains the portable text content you expect. If cards is an array of objects and the portable text is nested (like card.content), you'd use:

   value={card.content}

3. Verify portable text format - Ensure each card contains properly formatted Portable Text (an array of blocks), not just a string.

If you're still having issues, check the console for any errors and verify what cards actually contains by logging it: console.log(cards).