Render a component to HTML

Play the server. Use renderToString from react-dom/server to turn <Card name="Mango" price={60} /> into an HTML string.

Show that string as text inside <pre id="html"> (set its textContent), and put the same HTML into #root with innerHTML, the way a server response would put it in the page.

Don't use createRoot: the page must come from the HTML string, not from client rendering.

What Check tests

#root contains the card heading Mango
The card shows the price ₹60
#html shows the HTML source as text
Uses renderToString and not createRoot

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.

Command Palette

Render a component to HTML