CODEWITHSUNDEEP
javascriptreactjshtml-entities
Abhinandan Khilari
Abhinandan Khilari

Reputation: 1077

JavaScipt: Pass HTML entities as function parameter

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?

Upvotes: 2

Views: 395

Answers (2)

MpCodes
MpCodes

Reputation: 21

import React from "react";
import "./style.css";

export default function App() {
 const htmlEntity = <div>&#247;</div>;
 return (
  <div>
   <Hello htmlEntity={htmlEntity}/>
  </div>
 );
}

const Hello = ({htmlEntity}) => (
 <div>{htmlEntity}</div>
)

Implement it like this

Upvotes: 1

Sushmit Sagar
Sushmit Sagar

Reputation: 1508

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 &middot; 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} />

Upvotes: 2

Related Questions