When will you use this?

Use when you are ready to put the app online for users or employers to see.

• Shipping means tests pass, build succeeds, and Docker or Azure hosts the static files.
• Companies run CI so broken code never reaches users.

Real-world: sanitize user bio

Social profile displays user bio — never dangerouslySetInnerHTML with raw input; React escapes text by default.

Production-style code

function UserBio({ bio }) {
  // ✅ Safe — React escapes HTML in {bio}
  return <p className="bio">{bio}</p>;
}

// ❌ Never do this with user content:
function UnsafeBio({ html }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

// If rich text required — use DOMPurify on server + client
import DOMPurify from 'dompurify';
const clean = DOMPurify.sanitize(untrustedHtml);

What happens in production: XSS steals sessions — default JSX escaping stops most attacks; sanitize when HTML is required.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// ❌ Dangerous
<div dangerouslySetInnerHTML={{ __html: userBio }} />

// ✅ Safe — React escapes text by default
<p>{userBio}</p>

Line-by-line walkthrough

How it works (big picture)

• React escapes {userBio} in JSX.
• dangerouslySetInnerHTML bypasses that — only use with sanitized HTML from a trusted library like DOMPurify.

Do this on your computer

1. Never insert raw user HTML without sanitizing.
2. Add Content-Security-Policy header on server.
3. Validate URLs in href attributes.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

React text in JSX is escaped by default. Avoid dangerouslySetInnerHTML with user data. Use CSP headers.

Common questions