2

I'm trying to render some html inside <![CDATA[ ]] block passed to dangerouslySetInnerHTML in ReactJS and this content renders as a commented out. E.g. I get <!--[CDATA[Where is my text?]]--> instead of [CDATA[Where is my text?]] in the DOM.

const HTML_OK = '<pre>My text looks good</pre>'
const HTML_CDATA = '<pre><![CDATA[Where is my text?]]></pre>'

class Hello extends React.Component {
  render() {
    return <div dangerouslySetInnerHTML={{ __html: this.props.html }} />;
  }
}

ReactDOM.render(
 <div>
    <Hello html={HTML_OK} />
    <Hello html={HTML_CDATA} />
  </div>,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

How can I get <![CDATA[ ]] displays ok in my React application?

Pavlo Kozlov
  • 966
  • 1
  • 9
  • 22
  • 1
    It seems that you cannot display CDATA if you serve your page as text/html. This topic may help you : https://stackoverflow.com/questions/2746803/is-it-possible-to-use-cdata-inside-pre-tag – Ugo T. Apr 02 '18 at 15:52

0 Answers0