wrapper component not rendering HTML properly

[mohamedelhosseiny]

Hello, so I have a wrapper component which recieves a String as prop and should render it as HTML:

import React, { Component } from 'react';
var ReactDOMServer = require('react-dom/server');
var HtmlToReactParser = require('html-to-react').Parser;

class HtmlRenderer extends Component {
  componentDidMount() {
    var htmlInput = this.props.html;
    var htmlToReactParser = new HtmlToReactParser();
    var reactElement = htmlToReactParser.parse(htmlInput);
    var reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement);
    this.setState({reactHtml,})
  }
  state = {
    reactHtml: null,
  }
  render() {
    return (
      <div>
        {
          this.state.reactHtml && <div> {this.state.reactHtml}</div>
        }
      </div>
    )
  }
}
export default HtmlRenderer;

it's currently rendering a String.

Do you have any idea why?

[simplecommerce]

@mohamedelhosseiny most likely because renderToStaticMarkup renders as string

did you try just rendering reactElement instead?

[aknuds1]

I don't use JSX myself, but I would also think that you should render to a React element instead of raw HTML.

[mcastre]

@simplecommerce Would you mind providing an example using jsx to render as react element instead of using renderToStaticMarkup?

Thanks!

[simplecommerce]

@mcastre you can see one here.

[mcastre]

excellent! Thank you @simplecommerce

[mcastre]

Hi @simplecommerce i just tried rendering html returned from an api using the example you linked to me. My app is rendering [object HTMLDocument] to the DOM instead of the expected react nodes. Have you encountered this issue before?

UPDATE: Never mind, i realized that i needed to parse the html into a string before running it through.

Im struggling with trying to render an html table. I saw a couple of issues posted about whitespace problems but i cant seem to get a working solution in place. Has anyone ever gotten a successful render of an html table using html-to-react? If so, would really love an example!

[simplecommerce]

@mcastre The example in my issue is rendering html string to react.

Your issue is here in your code:

    var reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement);

you are converting the reactElement back into string and then trying to render it.

when you want to render html string you need to use

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

but I don't understand why you wouldn't just follow the example I wrote and just render the converted react element directly instead of using renderToStaticMarkup

This should be your logic.

html string table > pass it to html-to-react > render it

right now from what I see you are doing this:

html string table > pass it to html-to-react > pass it to renderToStaticMarkup > render.

[aknuds1]

Closing due to inactivity.