Render string as JSX in React.js

Question

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

@avinash Why? You want to remove the double quotes on the very beginning and on the very end and that's what the linked question is all about. — CodeF0x, Feb 06 '19 at 09:43
@avinash I am sorry, but I don't understand your problem. Can you edit your question and provide more detail? — CodeF0x, Feb 06 '19 at 09:46
Why do you have double quotes around your `` tag at first? Don't get it. — Kévin Bibollet, Feb 06 '19 at 10:01
@iArcadia let flag = emojione.shortnameToImage(":flag_gb:"); Here, emojione gives data in string — Engineer, Feb 06 '19 at 10:04
And with `emojione.shortnameToImage(":flag_gb:").replace(/"(.+)"/, '$1')`? — Kévin Bibollet, Feb 06 '19 at 10:09

Dhananjai Pai · Accepted Answer · 2019-02-06T10:33:08.190

3

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? ]

edited Feb 06 '19 at 10:33

answered Feb 06 '19 at 10:30

Dhananjai Pai

5,914
1
10
25

thanks, it is working with dangerouslySetInnerHTML – Engineer Feb 06 '19 at 10:32

score -1 · Answer 2 · answered Feb 06 '19 at 10:22

If you want to remove some characters from the start and end of a string in JS, you can use the trim2() function from the following example:

<script>
function trim2(str, chr) {
  var rgxtrim = (!chr) ? new RegExp('^\\s+|\\s+$', 'g') : new RegExp('^'+chr+'+|'+chr+'+$', 'g');
  return str.replace(rgxtrim, '');
}

var str ='"<img class="emojione" alt="????" title=":flag_gb:"src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f1ec-1f1e7.png"/>"';

let s2 = trim2(str, '"');
alert(s2);
</script>

Source: https://coursesweb.net/javascript/trim-rtrim-ltrim-javascript_cs

even if the leading quotes are removed, it doesn't convert the string into JSX and does not solve the original problem. — Dhananjai Pai, Feb 06 '19 at 10:24

Render string as JSX in React.js

2 Answers2

Linked