Is there any way to pass HTML
entities as function parameters in JavaScript.
I am building a React app and I need to pass HTML
entities from parent component to child component as a prop
and then display character represented by that entity in the child component.
For example, please refer stackblitz here.
In Hello
component I need to print htmlEntity
received from App component as a prop
and display character represented by that entity, in this case it would be symbol - ''.
How this can be achieved?
one way is to use dangerouslySetInnerHTML
in react.
function createMarkup(str) {
return {__html: str};
}
function MyComponent({str}) {
return <div dangerouslySetInnerHTML={createMarkup(str)} />;
}
const myText = 'First · Second';
<MyComponent str={myText} />}
another way is to use Unicode characters with escape notation (e.g. \u0057) instead of HTML codes (·).
function MyComponent({str}) {
return <div>{str}</div>;
}
const myText = 'First \u0057 Second';
<MyComponent str={myText} />