CODEWITHSUNDEEP
javascripthtmlreactjs
tom_son
tom_son

Reputation: 135

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!

Upvotes: 2

Views: 730

Answers (2)

s.kuznetsov
s.kuznetsov

Reputation: 15213

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

const pars = new DOMParser();
const tooltip = pars.parseFromString("0 ≤ 5", 'text/html').body.textContent;

Ultimately specifies a decorated constant:

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  render() {
    const pars = new DOMParser();
    const tooltip = pars.parseFromString("0 ≤ 5", '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={tooltip} />
      </React.Fragment>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

Upvotes: 0

Aditya Sarin
Aditya Sarin

Reputation: 46

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.

Upvotes: 1

Related Questions