Insert HTML with React Variable Statements JSX

Question

I am building something with React where I need to insert HTML with React Variables in JSX  Is there a way to have a variable like so   var thisIsMyCopy     lt p gt copy copy copy  lt strong gt strong copy lt  strong gt  lt  p gt      and to insert it into react like so  and have it work   render  function         return            lt div className  content  gt  thisIsMyCopy  lt  div gt             and have it insert the HTML as expected  I haven t seen or heard anything about a react function that could do this inline  or a method of parsing things that would allow this to work

User · Answer

dangerouslySetInnerHTML has many disadvantage because it set inside the tag.

I suggest you to use some react wrapper like i found one here on npm for this purpose. html-react-parser does the same job.

import Parser from 'html-react-parser';
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content">{Parser(thisIsMyCopy)}</div>
    );
}

Very Simple :)

User · Answer

If anyone else still lands here  With ES6 you can create your html variable like so    render        var thisIsMyCopy              lt p gt copy copy copy  lt strong gt strong copy lt  strong gt  lt  p gt             return           lt div gt               thisIsMyCopy           lt  div gt

User · Answer

Note that dangerouslySetInnerHTML can be dangerous if you do not know what is in the HTML string you are injecting  This is because malicious client side code can be injected via script tags   It is probably a good idea to sanitize the HTML string via a utility such as DOMPurify if you are not 100  sure the HTML you are rendering is XSS  cross-site scripting  safe   Example   import DOMPurify from  dompurify   const thisIsMyCopy     lt p gt copy copy copy  lt strong gt strong copy lt  strong gt  lt  p gt      render  function         return            lt div className  content  dangerouslySetInnerHTML     html  DOMPurify sanitize thisIsMyCopy    gt  lt  div gt

User · Answer

import   Fragment   from  react     react version  gt  16 0  var thisIsMyCopy        lt Fragment gt       lt p gt copy copy copy amp nbsp       lt strong gt strong copy lt  strong gt       lt  p gt     lt  Fragment gt      By using    the sets the value to a string and React has no way of knowing that it is a HTML element  You can do the following to let React know it is a HTML element -   Remove the    and it would work Use  lt Fragment gt  to return a HTML element

User · Answer

You can also include this HTML in ReactDOM like this   var thisIsMyCopy     lt p gt copy copy copy  lt strong gt strong copy lt  strong gt  lt  p gt     ReactDOM render  lt div className  content  gt  thisIsMyCopy  lt  div gt   document getElementById  app       Here are two links link and link2 from React documentation which could be helpful

User · Answer

You don t need any special library or  quot dangerous quot  attribute  You can just use React Refs to manipulate the DOM  class MyComponent extends React Component            constructor props                     super props                  this divRef   React createRef            this myHTML    quot  lt p gt Hello World  lt  p gt  quot                 componentDidMount                      this divRef current innerHTML   this myHTML                 render                      return                             lt div ref  this divRef  gt  lt  div gt                      A working sample can be found here  https   codepen io bemipefe pen mdEjaMK

User · Answer

To avoid linter errors  I use it like this     render         const props           dangerouslySetInnerHTML      html    lt br  gt                 return            lt div     props  gt  lt  div gt

User · Answer

By using    you are making it to string  Use without inverted commas it will work fine

User · Answer

Try Fragment  if you don t want any of above  In your case  we can write import React   useState  Fragment  from  react   const thisIsMyCopy   Fragment   lt p gt copy copy copy  lt strong gt strong copy lt  strong gt  lt  p gt     render  function         return            lt div className  quot content quot  gt  thisIsMyCopy  lt  div gt            If you using hook want to set it in a state somewhere with any condition const  thisIsMyCopy  setThisIsMyCopy    useState  lt Fragment gt  lt p gt copy copy copy  lt strong gt strong copy lt  strong gt  lt  p gt  lt  Fragment gt

User · Answer

You can use dangerouslySetInnerHTML  e g   render  function         return            lt div className  content  dangerouslySetInnerHTML     html  thisIsMyCopy   gt  lt  div gt

[javascript] Insert HTML with React Variable Statements (JSX)

Examples related to javascript

Examples related to html

Examples related to frontend

Examples related to reactjs

Examples related to react-jsx