{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/understanding-dangerouslysetinnerhtml-in-react/", "result": {"data":{"markdownRemark":{"html":"

Below, when the App component is rendered, we would expect to see the text All Rights Reserved in bold.

\n
import React from "react"\n\nconst App = () => {\n  const text = "<strong>All Rights Reserved</strong>"\n  return <div className="m-5">{text}</div>\n}\n\nexport default App
\n

Instead, what we see is the regular text with <strong> HTML tags.

\n

\n \n .grvsc-code > .grvsc-line::before {\n content: ' ';\n position: absolute;\n width: 100%;\n }\n \n .grvsc-line-diff-add::before {\n background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\n }\n \n .grvsc-line-diff-del::before {\n background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\n }\n \n .grvsc-line-number {\n padding: 0 2px;\n text-align: right;\n opacity: 0.7;\n }\n \n .synthwave-84 { background-color: #262335; }\n .synthwave-84 .mtk8 { color: #72F1B8; }\n .synthwave-84 .mtk1 { color: #FFFFFF; }\n .synthwave-84 .mtk3 { color: #FF7EDB; }\n .synthwave-84 .mtk10 { color: #FEDE5D; }\n .synthwave-84 .mtk16 { color: #FF8B39; }\n .synthwave-84 .mtk6 { color: #36F9F6; }\n .synthwave-84 .mtk12 { color: #FFFFFFEE; }\n .synthwave-84 .mtk14 { color: #B6B1B1; }\n .synthwave-84 .mtk7 { color: #2EE2FA; }\n .synthwave-84 .mtk9 { color: #FE4450; }\n .synthwave-84 .grvsc-line-highlighted::before {\n background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n }\n","frontmatter":{"title":"Understanding dangerouslySetInnerHTML in React","date":"2021-07-07"}}},"pageContext":{"slug":"/understanding-dangerouslysetinnerhtml-in-react/","prev":{"fields":{"slug":"/implement-dark-mode-theme-in-react-using-css-variables-and-react-context/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/Working-With-localStorage-in-React/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}