CODEWITHSUNDEEP
javascriptreactjsemojione
Engineer
Engineer

Reputation: 1261

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

Upvotes: -1

Views: 5415

Answers (2)

Dhananjai Pai
Dhananjai Pai

Reputation: 6015

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

Upvotes: 3

CoursesWeb
CoursesWeb

Reputation: 4237

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>

Upvotes: -1

Related Questions