0

I crated a react html element like:

let elements = (
      <div>
        <div>dwewe</div>
        <div>wefwef</div>
        <span>yurhfjer</span>
      </div>

    );

and now I wanted to pass this to an html attribute, hence I converted the react element into string using:

<span data-tip-react={ReactDOMServer.renderToString(element)}>{title}></span>

I'm now able to access these elements, however I'd like to convert it back to react element (the way it was before conversion) here is what I'm expecting the o/p as:

enter image description here

I tried using DOMParser, however it returned an html element that React did not accept for rendering and threw an errr: not a react element

How do I convert the string back into the same format - React element?? please help! thanks

user1234
  • 3,000
  • 4
  • 50
  • 102
  • can you show this part ```I tried using DOMParser, however it returned an html element that React did not accept for rendering and threw an errr: not a react element``` – Crocsx Mar 06 '20 at 09:08

1 Answers1

0

Following here :

dynamic HTML String to react component

You can use dangerouslySetInnerHTML (for simple element) or some npm package : 

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  getDom() {
    return (
      <div>
        <div>dwewe</div>
        <div>wefwef</div>
        <span>yurhfjer</span>
      </div>
    );
  }

  convertToString(dom) {
    console.log("To String", ReactDOMServer.renderToString(dom))
    return ReactDOMServer.renderToString(dom)
  }

  convertToDOM(string) {
    let domparser = new DOMParser();
    console.log("To Dom", domparser.parseFromString(string, 'text/html'))
    return domparser.parseFromString(string, 'text/html')​​
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
          {<div dangerouslySetInnerHTML={{__html: this.convertToString(this.getDom())}}></div>}
        </p>
      </div>
    );
  }
}

ex : https://stackblitz.com/edit/react-mhsqfd

Crocsx
  • 2,534
  • 1
  • 28
  • 50
  • Thanks for the solution: This is what I tried for DOM purify: ```let parser = new DOMParser(); let parsedHtml = parser.parseFromString(htmlContent, 'text/html')``` and I'm trying to render it as react HTML for which I get this error: – user1234 Mar 06 '20 at 16:34
  • Error: Objects are not valid as a React child (found: object with keys {__html}). If you meant to render a collection of children, use an array instead. – user1234 Mar 06 '20 at 16:36
  • also is there any alternative for using ```dangerouslySetInnerHTML```, this is prone to xxs attacks and we are suing sanitize in our app for purifying any html tag strings..so I'm sure if this will work.. :( – user1234 Mar 06 '20 at 16:37
  • @user1234 sorry for the delay, do you still have the problem? If so can you make a quick stackblitz so that it is easier to understand ? – Crocsx Mar 09 '20 at 02:17
  • When you say `I'm trying to render it as react HTML` do you mean you tried to do something like `` – Crocsx Mar 09 '20 at 02:19
  • 1
    Then the fast way would be to use something like `react-jsx-parser` or do by hand the convertion to react code using babel like https://stackoverflow.com/questions/36104302/how-do-i-convert-a-string-to-jsx – Crocsx Mar 09 '20 at 04:01