Eli Yazdi Eli Yazdi - 3 months ago 27
React JSX Question

Using EmojiOne With React

I've been trying to use EmojiOne with React.js with the standard .toImage (see docs http:// git.emojione.com/demos/latest/jstoimage.html). Here is what my code looks like, more or less

//react imports
import emoji from 'emojione';
//class component etc. render
return(
//other things from component
{emoji.toImage(':smile:')}
)


Which gives me

link to image

Here's what it looks like in inspect element:

link to image

So from what I can tell, the emojione library is putting the image code into React as text, rather than as an element. Any idea why?

Thanks!

Answer

React is escaping the output from EmojiOne to avoid cross-site scripting attacks. You could (but probably shouldn't...) use dangerouslySetInnerHTML to inject the output from EmojiOne as "actual" HTML.

Someone has already written a React EmojiOne wrapper that may be useful: https://github.com/pladaria/react-emojione

For more info on dangerouslySetInnerHTML and why it should be avoided, take a look at: https://facebook.github.io/react/tips/dangerously-set-inner-html.html

Comments