Why isn't HTML Entity in input title not working for React

Why can’t I use the HTML Entity ≤ for the HTML input title attribute using a JavaScript constant but I can if I use a string?

The HTML Entity ≤ is the ≤ symbol.

I have provided a demonstration:
https://codesandbox.io/s/react-playground-forked-1ji67?file=/index.js:256-260

When you hover over the top input, you’ll see the symbol which was defined by a string. However, if you hover over the bottom input, the symbol is not displayed instead the string ≤ which was defined using a const.

Thanks in advance!

15 thoughts on “Why isn't HTML Entity in input title not working for React”

  1. You need to be in a JSX context to emit ≤, not just a string.

    You may need to use <></> instead of <React.Fragment></React.Fragment> or a <div> / <span> would also work.

    Reply
  2. You can use parseFromString() method converting to html from string by declaring DOMParser(). Like this

    const tooltipText = "0 &le; 5";
    const pars = new DOMParser();
    const tooltipHTML = pars.parseFromString(tooltipText, 'text/html').body.textContent;
    

    Ultimately specifies a decorated constant:

    <input type="text" title={tooltipHTML} />
    

    Full code:

    import React from "react";
    import ReactDOM from "react-dom";
    
    class App extends React.Component {
      render() {
        const tooltipText = "0 &le; 5";
        const pars = new DOMParser();
        const tooltipHTML = pars.parseFromString(tooltipText, 'text/html').body.textContent;
        return (
          <React.Fragment>
            <label>Working tooltip: </label>
            <input type="text" title="0 &le; 5" />
            <br />
            <label>Not working tooltip: </label>
            <input type="text" title={tooltipHTML} />
          </React.Fragment>
        );
      }
    }
    
    ReactDOM.render(<App />, document.getElementById("container"));
    
    Reply

Leave a Comment