CODEWITHSUNDEEP
javascriptreactjssuperscript
JoeTidee
JoeTidee

Reputation: 26044

How to show html entity using React?

I am wanting to show the 'cubic' html entity (superscript 3). I am doing like this:

const formatArea = function(val){
    return val + " ft³";
}

where formatArea is being called from inside the component':

render(){
    return (
        <div>
            {formatArea(this.props.area)}
        </div>
    );
}

but, the browser is showing it as ft&sup3;

Upvotes: 53

Views: 65644

Answers (6)

torvin
torvin

Reputation: 7091

New way using React's fragments:

<>&sup3;</>

In your case it can be:

const formatArea = function(val){
    return <>{val} ft&sup3;</>
}

Upvotes: 48

Ren Yun
Ren Yun

Reputation: 31

const formatArea = function(val){
  return <>{val} ft<span>&sup3;</span></>;
}

render(){
    return (
        <div>
            {formatArea(this.props.area)}
        </div>
    );
}

Demo

Upvotes: 0

Avishay28
Avishay28

Reputation: 2456

Another option is to use fromCharCode method:

const formatArea = (val) => {
    return val + ' ft' + String.fromCharCode(179);
}

Upvotes: 46

Yuci
Yuci

Reputation: 30089

  • Method 1

    const formatArea = val => <div>{val} ft{'³'}</div>

  • Method 2

    const formatArea = val => <div>{val} ft{'\u00B3'}</div>

  • Method 3: fromCharCode

    const formatArea = val => <div>{val} ft{String.fromCharCode(parseInt('B3', 16))}</div>

  • Method 4

    const formatArea = val => <div>{val} ft{String.fromCharCode(179)}</div>

  • Method 5: HTML Codes

    const formatArea = val => <div>{val} ft&sup3;</div>

  • Method 6

    const formatArea = val => <div>{val} ft&#179;</div>

  • Method 7

    const formatArea = val => <div>{val} ft<sup>3</sup></div>

Then you can render it:

render() {
  return (
    {formatArea(this.props.area)}
  )
}

Upvotes: 18

WitVault
WitVault

Reputation: 24130

You can get that using dangerouslySetInnerHTML feature of jsx.

Another way would be use correspond unicode character of html entity and just use as normal string.

const formatArea = function(val){
    return val + " ft&sup3;";
}

const Comp = ({text}) => (
<div>
<div dangerouslySetInnerHTML={{__html: `${text}`}} />
<div>{'53 ft\u00B3'}</div>
</div>

);

ReactDOM.render( <Comp text={formatArea(53)} /> ,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Upvotes: 18

JoeTidee
JoeTidee

Reputation: 26044

Found this way using JSX:

const formatArea = (val) => {
    return (<span>{val}&nbsp;ft<sup>3</sup></span>);
}

Upvotes: 20

Related Questions