React.js: Raw Html String Does Not Gets Recognized As Html Elements From Node.js

I am sending a raw HTML from node.js to react. and It was successful. However, when I try to render it, they are render as raw string as opposed to HTML elements This is how I get

Solution 1:

You may be able to leverage dangerouslySetInnerHtml, like so:

render()  {
  return (
    <div><div><divclassName="App"><headerclassName="App-header"><imgsrc={logo}className="App-logo"alt="logo" /><h1className="App-title">Welcome to Shopping Center</h1></header></div><divclassName="row"dangerouslySetInnerHTML={{__html:this.state.data}}
        /></div><buttontype="button"className="btn btn-primary Bottom-right "onClick={(e) => this.handleSubmit(e)}
      >
        My Cart
      </button></div>
  );
}

Solution 2:

You could just wrap your string in the following, once it has been fetched.

document.createRange().createContextualFragment(yourString);