What is the purpose of dangerouslySetInnerHTML in React, and when should you use it?

What is the purpose of dangerouslySetInnerHTML in React, and when should you use it?

• A. It sets HTML content from a string without any safety considerations.
• B. It escapes HTML strings to prevent injection automatically.
• C. It lets you set HTML content from a string; only use it with sanitized content.
• D. It is the recommended way to render dynamic content with JSX.

Answer: (C)

Rendering HTML from a string in React requires a deliberate opt-in because React normally escapes content to prevent XSS. dangerouslySetInnerHTML provides a way to bypass that escaping and insert HTML directly into the DOM, but it does so with a warning: you must ensure the HTML is sanitized before using it. The best choice says it lets you set HTML content from a string and should only be used with sanitized content. That captures the essence: you’re taking a string of HTML and rendering it, which React won’t do by default for you. Because this bypasses React’s protection, you need to sanitize the string to remove any potentially harmful scripts or tags before injecting it. A typical usage is: <div dangerouslySetInnerHTML={{ __html: sanitizedHtmlString }} />. If the content isn’t sanitized, you’re opening the door to XSS vulnerabilities. In contrast, React normally escapes HTML, so you don’t see raw HTML when you render strings directly, and this method is not the recommended way to render dynamic content with JSX. It’s specifically for cases where you must render a string of HTML that you’ve carefully cleaned or control entirely, such as content from a trusted CMS or a sanitized, static HTML snippet. So, the correct concept is about explicitly injecting HTML from a string and doing so safely—sanitize first, then use dangerouslySetInnerHTML.

Rendering HTML from a string in React requires a deliberate opt-in because React normally escapes content to prevent XSS. dangerouslySetInnerHTML provides a way to bypass that escaping and insert HTML directly into the DOM, but it does so with a warning: you must ensure the HTML is sanitized before using it.

The best choice says it lets you set HTML content from a string and should only be used with sanitized content. That captures the essence: you’re taking a string of HTML and rendering it, which React won’t do by default for you. Because this bypasses React’s protection, you need to sanitize the string to remove any potentially harmful scripts or tags before injecting it. A typical usage is: <div dangerouslySetInnerHTML={{ __html: sanitizedHtmlString }} />. If the content isn’t sanitized, you’re opening the door to XSS vulnerabilities.

In contrast, React normally escapes HTML, so you don’t see raw HTML when you render strings directly, and this method is not the recommended way to render dynamic content with JSX. It’s specifically for cases where you must render a string of HTML that you’ve carefully cleaned or control entirely, such as content from a trusted CMS or a sanitized, static HTML snippet.

So, the correct concept is about explicitly injecting HTML from a string and doing so safely—sanitize first, then use dangerouslySetInnerHTML.