Skip to content

dangerouslySetInnerHTML Prop in React

Find out what is dangerouslySetInnerHTML in React and why it is named in such a way.

Setting HTML from code can lead to exposing your users to a cross-site scripting (XSS) attack. In case your are setting HTML from your code, you can intentionally set it as dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

<div
  dangerouslySetInnerHTML={{
    __html: '<h1>Hello World</h1>'
  }}></div>

The prop name dangerouslySetInnerHTML is intentionally chosen by the React developers to be frightening, and the prop value (an object instead of a string) can be used to indicate sanitized data.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.