Render whole html file in react component

Question

I am serving some content from my API. I want display response from API in my react component. Response is html with bundled all assets inline by webpack.

How can I do it?

I tried dangerouslySetInnerHTML but it crashes my javascript inside returned html.

My cmp :

import React, { Component } from 'react';
import axios from 'axios';

export default class Report extends Component {
constructor() {
    super();
    this.state = {
        id: null,
        report: null
    };
}

getParam(param){
    return new URLSearchParams(window.location.search).get(param);
}

componentWillMount() {
    axios.post(`/url`,
        {
            'id': this.getParam('id'),
        }
    )
        .then(res => {
            this.setState({id: res.data});
            setTimeout(() => {
                axios.get(`https://rg.ovh/`+this.state.id)
                    .then(res => {
                        this.setState({report: res.data})
                    });
            }, 1900);
        });
}

render() {
    return (
        <div dangerouslySetInnerHTML={ {__html: this.state.report} } />
    );
}

}

Answer 1

import axios from 'axios';
import React, { Component } from 'react';
import renderHTML from 'react-render-html';

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

  componentDidMount() {
    axios.get('http://localhost:5000').then(response => {
      this.setState({ htmlString: response.data })
    }).catch(err => {
      console.warn(err);
    });
  }

  render() {
    const { htmlString } = this.state;

    return (
      <div className="App">
        {renderHTML(htmlString)}
      </div>
    );
  }
}

export default App;