Skip to content
Advertisement

React render DOM HTML page in component

In my React app, I am using the standard component. However, when the user clicks a save & exit option they should be redirected to a page which is a dom element from an outside location: document.getElementById('thank-you')

I’ve created a component which should display this page: RedirectComponent

const Redirect = () => {
  return (
      <div
        dangerouslySetInnerHTML={{
          __html: window.document.getElementById('save-landing-page'),
        }}
      />
  );
};

I thought that setting this to display inner HTML as shown in the code below would result in the display of my element as the first error I got suggested I use an array (which the data is not)

However,where the component should be rendered, I only see the following text:

[object HTMLElement]

How can I display this external page in my React Component?

Advertisement

Answer

In this line of code,

<div
  dangerouslySetInnerHTML={{
   __html: window.document.getElementById('save-landing-page'),
 }}
/>

-> You are assigning the HTMLElement as the HTML value which won’t work.

-> And that is the reason you are hetting [object HTMLElement] as result.

-> Instead you need to assign the HTML that you get from window.document.getElementById('save-landing-page') .

-> For which you need to assign innerHTML of the element.

So change,

window.document.getElementById('save-landing-page')

to:

window.document.getElementById('save-landing-page').innerHTML
Advertisement