Intermediate
Render Only What Is in the Registry
The model sent a list of specs, { component, props }. Write render(spec) so that every spec adds one element to #out when #run is clicked.
A valid Note adds <p class="card"> with its text. A valid Price adds <p class="card"> with ₹ and the amount. Anything else (an unknown name such as Script, the name constructor, props that fail their schema, or something that is not a spec) adds <p class="fallback">Mitra could not show this part of the answer.</p>. Show text with textContent, never innerHTML.
What Check tests
- Before the click
#outis empty - Clicking
#runadds one element per spec: 3 cards and 4 fallbacks - The cards show the right text
- HTML in a prop is shown as text, not parsed
- The name
constructoris rejected: the code looks names up withObject.hasOwn
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.