Exercise 1: Rendering Trusted HTML via dangerouslySetInnerHTML — Possible Solution ==================================================================== THE CODE ------------------------------ Per this chapter, PageShell.tsx renders the page body with:
WHY THE PROP SHAPE LOOKS UNUSUAL ------------------------------ Unlike a normal React prop, dangerouslySetInnerHTML takes an object with a single __html key, not the raw string directly - e.g. dangerouslySetInnerHTML={{ __html: page.body }}, not dangerouslySetInnerHTML={page.body}. This is a deliberate API design choice (not an arbitrary requirement) meant to make accidentally passing raw, unescaped user-controlled content harder to do by mistake. CONFIRMATION ------------------------------ Storing a page.body value containing a real bold text tag and visiting that page in the browser shows the word actually rendered bold, not the literal text "bold text" appearing on the page - confirming React skipped its own default escaping for this specific element, exactly as intended. WHY THIS WORKS AS AN ANSWER ------------------------------ It correctly uses the required { __html: ... } object shape rather than passing the string directly (a common first mistake), and confirms the result visually - a real rendered tag rather than escaped text - rather than just trusting the code compiles without checking what it actually produces in the browser.