Accessing nested product titles in Sanity collection array

This is a classic nested array issue! You're absolutely right that you need a second mapping. The problem is that collection.products is an array, so you can't access .title directly on it - you need to map through that array as well.

Here's how to fix it:

const Home = ({ product, collection }) => {
  return (
    <>
      <Collection collection={collection} />
      {(collection ?? []).map((collection) => (
        <div key={collection.title}>
          {/* Map through the products array */}
          {(collection.products ?? []).map((product) => (
            <div key={product._id || product.title}>
              {product.title}
            </div>
          ))}
        </div>
      ))}
    </>
  );
};

What's happening:

1. Your first map iterates through the collection array
2. Inside each collection, collection.products is another array of product objects
3. You need a second .map() to iterate through each product in that array
4. Then you can access product.title on each individual product object

A few tips:

• I added the ?? [] safety check on collection.products too, in case a collection has no products
• Use a unique key like product._id if available (Sanity documents have _id fields), falling back to product.title if needed
• If you're just debugging, you could also do {console.log(collection.products[0]?.title)} to see the first product's title

If you're still getting undefined:

Make sure your GROQ query is actually fetching the product data. If products is a reference field, you need to dereference it in your query:

*[_type == "collection"] {
  title,
  products[]-> {
    title,
    _id
  }
}

The -> operator dereferences the product references so you get the actual product data, not just the reference IDs. Check out the GROQ references documentation for more details on how dereferencing works in Sanity queries.