In my project with Next.JS 13, I am currently exploring methods to manually inject component code into an existing element in the DOM that has already been rendered. Below is the code snippet for the component:
const layouts = {
forgotPassword: () => {
return (
<>
<ManualScrollerObject className="flex v center gap2">
<h3>
Forgor your password?
</h3>
<Field name="Tag/Email" id="user" />
<Field name="Password" id="pass" icon="bx bxs-lock" type="password"/>
<div className="flex v center gap1" style={{width: '100%'}}>
<LoginButton>
Sign in
</LoginButton>
<p>
No, no, no <a href="/signup">take me back!</a>
</p>
<p>
<a href="/forgot">Forgor your password?</a>
</p>
</div>
</ManualScrollerObject>
</>
)
}
}
My goal is to add this specific element as a child to another element acquired through document.getElementById(), without replacing the existing children.
I have devised a separate function for this purpose, and here is my attempt:
function forgotPassword() {
const loginScroller = document.getElementById('loginScroller');
ReactDOM.render(
layouts.forgotPassword(),
loginScroller
)
}
React.render() replaces all children within the element, which is not the desired outcome. An alternative approach involves appending a separate element to the wrapper and assigning the desired element as its child. However, I find this method to be cumbersome and indirect.
Are there any efficient ways to dynamically inject the element using a function like this?