cf.completefrontend

ConceptHard

What can a Server Component pass as props to a Client Component, and why?

What's wrong with these two props, and how would you fix them?

The code
// ProductPage.jsx, a Server Component
import AddToCart from "./AddToCart.jsx"; // "use client"
 
export default async function ProductPage({ id }) {
  const product = await db.products.get(id); // an instance of a Product class
  return (
    <AddToCart
      product={product}
      onAdded={() => console.log("added")}
    />
  );
}

The answer

Answer it out loud first, the way you would in the interview. Then compare.

Checking your sign-in…