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³
New way using React's
fragments
:<>³</>
.In your case it can be:
Found this way using JSX:
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:
Another option is to use fromCharCode method:
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.