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³

6 Answers

Another option is to use fromCharCode method:

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

New way using React's fragments:

<>&sup3;</> 

In your case it can be:

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

Found this way using JSX:

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

• 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)} ) } 

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=""></script> <script src=""></script> <div></div>

const formatArea = function(val){ return <>{val} ft<span>&sup3;</span></>; } render(){ return ( <div> {formatArea(this.props.area)} </div> ); } 

Demo