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