How to render a full html in reactjs

Question

I have an HTML file with meta tags,header,body,forms coming from server in a string Now my doubt is how to open that full fledged html in reactjs since we already have a master index.html in reactjs. When I tried to use the dangerouslySetInnerHTML it is giving a blank page.

Yes I am using the dangerouslySetInnerHTML but my problem is a bit different. We already have our index.html file but from the server I am getting one payment gateway html which is something like this <html><head>....</head><body>....</body></html> . Now when I render this with dangerouslySetInnerHTML in a div its giving blank. — user1295308
– user1295308, Commented Mar 2, 2020 at 7:42
Better if the server sends only json and client renders jsx.or you can turn your spa into ssr — gadi tzkhori
– gadi tzkhori, Commented Mar 2, 2020 at 7:45
do you have any errors in the console? you could select only the contents of the body of that html file and render that inside dangerouslySetInnerHTML — hiddenuser.2524
– hiddenuser.2524, Commented Mar 2, 2020 at 7:45

gadi tzkhori · Accepted Answer · 2020-03-02 17:29:33Z

2

As I mentioned in the comments you can do it in various ways. As much as I hate iframes it could be the right solution for you.

NOTE: this solution has nothing to do with React

import React from "react";

const html = `<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>div{
    background: red;
    color: white;
  }</style>
</head>
<body>
<div>Hello iframe</div>
</body>
</html>`

export default function App() {
  return (
    <div className="App">
     <iframe srcDoc={html} title="my-iframe"></iframe>
    </div>
  );
}

see live example: here

please read about iframes in MDN here for more config

more reading about polyfill to srcDoc: here

edited Mar 2, 2020 at 17:29

answered Mar 2, 2020 at 17:04

gadi tzkhori

6123 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1295308 Over a year ago

Thanks it worked like charm .. but one more question how to read the response which the form in iframe is submitting. Right now it shows the jSON response in the page when the form is submitted. This is not expected. My main page should get some listener to get the event. The iFrame looks like this <body onload="return window.document.echoForm.submit()"> <form ....></form>

gadi tzkhori Over a year ago

You can use postMessage event to pass data between the iframe and the main page developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

gadi tzkhori Over a year ago

I suggest you contact the support of this 3rd party solution you are using maybe they can help you. it seems like there's a gap here of how to implement it(on your side).

user1295308 Over a year ago

Finally everything worked. I implemented a listener API for the payment integration. Once the listener receives success response I close the iframe. Thanks all for supporting. The solution of opening the link in iframe worked and also implementing the listener.

Collectives™ on Stack Overflow

How to render a full html in reactjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related