Rendering a div element inside existing div during page rendering

Question

I'm stuck at rendering a component insider a div. My code is like below, I want to render the div with classname RequestNewOrgBtn inside the parentDiv. How can I do it at runtime of render?

const labelItem =  Array.from(document.querySelectorAll('label'))
        .find(el => el.textContent === 'External Org Name');
    const parentDiv =  labelItem?.parentNode?.parentNode?.parentNode;

    return(
        <>
            {
                
              //render below div inside parentDiv
                <div className="RequestNewOrgBtn">
                    <Button disabled={false} onClick={onAddClick}>
                        { "Request New External org" }
                    </Button>
                    <RequestExternalOrgModal
                        isOpen={ShowReqExOrgModal}
                        onClose={onReqExOrgModalClose} />
                </div>
            }
        </>
    );

What purpose do you want to use this for that cannot be achieved via CSS? Why not add this code into whatever component is rendering the `parentDiv`? — Phil, Feb 06 '23 at 03:25
The thing is the code that is rendering the parentdiV is using flowable, and I cant access the form components inside flowable, only way i can do it rendering it while page is loading. I really i dont know how to do it via css — shanky, Feb 06 '23 at 03:29
You cannot just move React components around the DOM. Even if you do, while it might look correct presentationally, you will lose event binding like your `onClick={onAddClick}` — Phil, Feb 06 '23 at 03:48
But its not rendered yet, I want to put the logic before div in curly braces, cant we do that? — shanky, Feb 06 '23 at 03:53

Phil · Accepted Answer · 2023-02-06T05:48:59.137

1

Probably the easiest way to do this would be to render the appropriate parts of your React app into the element in question, similar to how you would render <App /> into your root element.

For example...

import { createRoot } from "react-dom/client";

import RequestNewOrgBtn from "./RequestNewOrgBtn"; // your component

const labelItem = Array.from(document.querySelectorAll("label")).find(
  (el) => el.textContent === "External Org Name"
);
const parentDiv = labelItem?.parentNode?.parentNode?.parentNode;

if (parentDiv) {
  // create a new root for your button component
  const btnRootElement = document.createElement("div");

  // append it into the found `parentDiv`
  parentDiv.appendChild(btnRootElement);

  const btnRoot = createRoot(btnRootElement);
  btnRoot.render(<RequestNewOrgBtn />);
}

For React 16, you just use the ReactDOM equivalent

import ReactDOM from "react-dom";

// ...

ReactDOM.render(<RequestNewOrgBtn />, btnRootElement);

edited Feb 06 '23 at 05:48

answered Feb 06 '23 at 04:10

Phil

157,677
23
242
245

I have react 16, createRoot isnt supported in 16.14 – shanky Feb 06 '23 at 04:28
That should have been part of your question. In that case, you just need to use the ReactDOM equivalent – Phil Feb 06 '23 at 04:29
thank you sir, it worked, I really appreciate it, finally. I don't have to create a customize flowable component. – shanky Feb 06 '23 at 05:28
Is there any way I can stop re-rendering it? Reason bc its been rendered many times on page – shanky Feb 06 '23 at 05:42
1

thanks, I just figured it out, I added a state variable to that page, and I checking the state before rendering – shanky Feb 06 '23 at 05:46
@shanky I wasn't aware that you were running this code within a component. You could probably use a [ref](https://beta.reactjs.org/reference/react/useRef) to keep track of any added elements – Phil Feb 06 '23 at 05:48
I have to provide store manually, wrapping component inside provider to access the state in RequestNewOrgBtn, I don't how can I provide it in another way? – shanky Feb 11 '23 at 16:03

Nick Jackson · Answer 2 · 2023-02-06T03:21:35.673

-1

This is a little ambiguous. But, if I am understanding correctly, I think you can set the innerHTML to append the div

parentDiv.innerHTML += "<div>Your div content here</div>"

better yet, set your div as a variable and then just += the variable for cleaner code.

const myDiv = "<div>Your div content here</div>"
parentDiv.innerHTML += myDiv

Used this to make sure I was remembering correctly

edited Feb 06 '23 at 03:21

answered Feb 06 '23 at 03:20

Nick Jackson

1
3

There's a big difference between some static HTML and a React component – Phil Feb 06 '23 at 03:26
Sorry, I am kind of new to interacting on Stack Overflow and didn't know where to look for the tags (I usually just find this place through google). I didn't see the react tag. My bad. But, I know where to look now. – Nick Jackson Feb 06 '23 at 12:53

Rendering a div element inside existing div during page rendering

2 Answers2