Intermediate
Split a page into server and client components
This page runs through a simulated RSC pipeline (at the bottom, don't change it): ProductPage is a server component and AddToCart is a client component. Right now the server passes a click handler to the client component, so the pipeline throws React's real error and the page shows it.
Fix it the RSC way: the server passes only data (productId={product.id}), and AddToCart keeps its own count with useState. Keep the ids: the button is #add and the count text is #count, showing In cart: 0, In cart: 1, …
What Check tests
- The pipeline no longer throws (no
#error) - The server-rendered heading shows
Blue pen - The payload has an
AddToCarthole with plain data only - The count starts at
In cart: 0 - Two clicks on
#addshowIn cart: 2
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.