CODEWITHSUNDEEP
htmlreactjs
CCCC
CCCC

Reputation: 6461

React - dangerouslySetInnerHTML does not show correct result

When I type below text on the textbox "Type Here"

AAA: 
<HEllo>

BBB:
<HE llo>

The Result should be same as the "Type Here".
The result box does not show the result which is same as the textbox, which share the same state.

Codesandbox
https://codesandbox.io/s/boring-cdn-z0wpu?file=/src/App.js:506-529

enter image description here

Upvotes: 1

Views: 2573

Answers (2)

83C10
83C10

Reputation: 1212

If you want to simply include linebreaks in your output container you could make use of the <pre> HTML tag. Change the following code in your example:

  Result:
  <pre className="grey-bubble">
    {this.state.msg}
  </pre>

Upvotes: 1

gkedzierski
gkedzierski

Reputation: 21

dangerouslySetInnerHTML doesn't escape HTML tags, which means they are rendered into DOM, and therefore don't appear as text. If you type <strong>Hello</strong> into your textbox, you'll see the bold "Hello" output. This is the correct behaviour of dangerouslySetInnerHTML.

Upvotes: 0

Related Questions