How to show html entity using React?

Question

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

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

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³

Avishay28 · Answer 1 · 2020-12-08T08:51:47.753

41

Another option is to use fromCharCode method:

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

edited Dec 08 '20 at 08:51

answered May 05 '18 at 09:20

Avishay28

2,288
4
25
47

2

This is the best answer! – mynameisnotallowed May 17 '18 at 14:47
3

easy and clean! – rvandoni Jul 18 '18 at 08:43
1

Took way to long to find this answer. Always used dangerously... even though I really didn't like that. Finally something simple and clean! – lehm.ro Feb 02 '20 at 16:51

torvin · Answer 2 · 2021-11-02T21:19:28.343

40

New way using React's fragments:

<>&sup3;</>

In your case it can be:

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

edited Nov 02 '21 at 21:19

answered Feb 11 '19 at 02:36

torvin

6,515
1
37
52

1

thx, you can also use this with the ternary operator e.g. `{ sortOrder === 'asc' ? <> ▲> : <> ▼> }` – wal Nov 16 '20 at 23:58

score 20 · Accepted Answer · answered May 22 '17 at 15:45

20

Found this way using JSX:

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

answered May 22 '17 at 15:45

JoeTidee

24,754
25
104
149

WitVault · Answer 4 · 2017-05-22T15:57:34.017

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>

score 17 · Answer 5 · answered Dec 21 '18 at 11:05

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³</div>
Method 6

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

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

Then you can render it:

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

This is a great answer, but the usage is odd. Since this is React wouldn't it make sense to render it as `` And declare those as proper components such as `const FormatArea = ({val})=>
{val} ft{'³'}
` — DiamondDrake, Mar 22 '20 at 16:35

Ren Yun · Answer 6 · 2021-11-24T07:47:37.340

0

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

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

Demo

edited Nov 24 '21 at 07:47

answered Nov 24 '21 at 07:38

Ren Yun

31
2

How to show html entity using React?

6 Answers6

Linked