# Warning: ReactDOM: Expected `dangerouslySetInnerHTML` to be a string, but got `object` instead.

- **ID:** `react/warning-react-dom-production-minification-issue`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 93%

## Root Cause

The `dangerouslySetInnerHTML` prop expects an object with a `__html` key containing a string, but a raw object or non-string value was passed, often due to misusing the prop or passing a component/JSX element instead of HTML string.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| React 18.2.0 | active | — | — |
| React 17.0.2 | active | — | — |
| React 16.14.0 | active | — | — |

## Workarounds

1. **Correct the usage: pass an object with __html key containing a sanitized HTML string. Example: <div dangerouslySetInnerHTML={{ __html: '<p>Hello</p>' }} />** (95% success)
   ```
   Correct the usage: pass an object with __html key containing a sanitized HTML string. Example: <div dangerouslySetInnerHTML={{ __html: '<p>Hello</p>' }} />
   ```
2. **If you're trying to render React components dynamically, use a different approach like using a state variable or a render prop instead of dangerouslySetInnerHTML.** (80% success)
   ```
   If you're trying to render React components dynamically, use a different approach like using a state variable or a render prop instead of dangerouslySetInnerHTML.
   ```
3. **Sanitize the HTML string using a library like DOMPurify before passing it to dangerouslySetInnerHTML to prevent XSS attacks.** (90% success)
   ```
   Sanitize the HTML string using a library like DOMPurify before passing it to dangerouslySetInnerHTML to prevent XSS attacks.
   ```

## Dead Ends

- **Pass a plain string directly to dangerouslySetInnerHTML without the __html wrapper** — dangerouslySetInnerHTML requires an object with __html key; passing a string directly will cause a different error. (95% fail)
- **Use innerHTML property directly on the DOM element via ref** — Direct DOM manipulation bypasses React's reconciliation and can lead to inconsistencies, but it's also not the intended fix for this warning. (85% fail)
- **Ignore the warning because the HTML still renders** — The warning indicates a potential XSS vulnerability or incorrect rendering; ignoring it can lead to security issues or broken UI. (90% fail)