0

Having this HTML block in a React app:

<div className="my-class" title={myValue}>
   <div>{myValue}</div>
</div>

The content of myValue is MyCompany™.

The inner div is showing the content correctly.

But the title, which appears when hover, replaces ™ with &trade; and shows it like this: MyCompany&trade;.

Why is this happening for the title? Is there a way to fix it?

Roy
  • 7,811
  • 4
  • 24
  • 47
Jean Pierre
  • 281
  • 8
  • 21

1 Answers1

1

You can use dangerouslySetInnerHTML, which is not ideal, but it is fine. So, the code should look like that:

let title = ["MyCompany", <span>™</span>]
<div className="my-class" dangerouslySetInnerHTML={{__html: title }}>
   <div>{title }</div>
</div>

If your entity is dynamic, like you told me in the comments, then we can do the following trick:

const parseASCII = (string) => { 
  const htmlTextArea = document.createElement('textarea'); 
  textarea.innerHTML = string; 
  return htmlTextArea.value; 
}
yovchokalev
  • 623
  • 7
  • 14
  • it would work if we have that format all the time but I used it just for an example. in reality the title can have or not that entity or maybe it could be situated inside the string – Jean Pierre Feb 05 '21 at 13:41