javascriptreactjsemojione

Render string as JSX in React.js

Change this 

"<img class="emojione" alt="🇬🇧" title=":flag_gb:"
src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f1ec-1f1e7.png"/>"

to

<img class="emojione" alt="🇬🇧" title=":flag_gb:"
src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f1ec-1f1e7.png"/>

I am using emojione in reactjs project and want to use in JSX like 

<div>
    <img class="emojione" alt="🇬🇧" title=":flag_gb:"
    src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f1ec-1f1e7.png"/>
</div>

Presently, it is displaying as string inside html

Solution

  • I am assuming your original issue is that the value is rendered as string instead of an element in React

    You can use the JSX attribute dangerouslySetInnerHTML

    Example :

    render() {
   str = '<img class="emojione" alt="🇬🇧" title=":flag_gb:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f1ec-1f1e7.png"/>'
   return( <div dangerouslySetInnerHTML={{__html: str}}></div> )
}

    Original SO Answer refer - [ How do I convert a string to jsx? ]