Show entity definitions inside title of divs

Question

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 ™ and shows it like this: MyCompany™.

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

Answer 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; 
}