How to show html entity using React?
Solution 1
Found this way using JSX:
const formatArea = (val) => {
return (<span>{val} ft<sup>3</sup></span>);
}
Solution 2
Another option is to use fromCharCode method:
const formatArea = (val) => {
return val + ' ft' + String.fromCharCode(179);
}
Solution 3
New way using React's fragments:
<>³</>
In your case it can be:
const formatArea = function(val){
return <>{val + ' '}³</>
}
Solution 4
-
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)}
)
}
Solution 5
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³";
}
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>
JoeTidee
Updated on December 11, 2021Comments
-
JoeTidee over 2 years
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³
-
mynameisnotallowed about 6 yearsThis is the best answer!
-
rvandoni almost 6 yearseasy and clean!
-
lehm.ro over 4 yearsTook way to long to find this answer. Always used dangerously... even though I really didn't like that. Finally something simple and clean!
-
DiamondDrake over 4 yearsThis is a great answer, but the usage is odd. Since this is React wouldn't it make sense to render it as
<FormatArea val={this.props.area} />
And declare those as proper components such asconst FormatArea = ({val})=> <div>{val} ft{'³'}</div>
-
wal over 3 yearsthx, you can also use this with the ternary operator e.g.
{ sortOrder === 'asc' ? <> ▲</> : <> ▼</> }