CODEWITHSUNDEEP
reactjstwemoji
Kavin404
Kavin404

Reputation: 1029

Unicode emoji rendering in Reactjs

I am trying to use emojis in my react application. I have installed the twemoji npm package and created a basic component as follows

class TwText extends React.Component {
  render() {
    let toHTML = () => ({
      __html: twemoji.parse(this.props.text)
    });
    return (
      <span className="tw-text" dangerouslySetInnerHTML={toHTML()} />
    );
  }
}
let msg = {text: "hello world \u{1f61a}"}
ReactDOM.render(
  // <TwText text={'hello world \u{1f61a}'}/>, // works
  <TwText text={msg.text}/>,                   // doesn't work for me
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>

However, if I try to call it like follows

  <TwText text={'hello world \u{1f61a}'}/>
  <TwText text={msg.text}/>

The first line actually renders the emoji but if the same line "hello world \u{1f61a}" is passed through the variable it doesn't render as expected. Does anyone know why?

Upvotes: 0

Views: 882

Answers (0)

Related Questions