react - Add a component after main component has loaded

Question

I have a functional react component like this:

function ComponentA(){
 function AddComponentB(){
  return <><ComponentB /></>
 }
  useEffect(() => {
    AddComponentB();
  }, []);
 return 
  <>
   <div id="parent"></div>
  </>
}

Now I have understood that everything under useEffect is loaded once the ComponentA is loaded. I want to add the ComponentB to div with id parent. Please help me understand how do I specify where to add the component.

P.S. I know I can do it by document.getElementById("parent").append(ComponentB) but I am looking for other ways.

Answer 1

No, you do not manipulate the DOM directly when using React.

You need to have a "flag" that dictates if you want to render the extra component or not.

Something like

function ComponentA(){
  const [renderComponentB, setRenderComponentB] = useState(false);

  useEffect(() => {
    setRenderComponentB(true);
  }, []);

  return (
    <>
     <div id="parent">
       {renderComponentB && <ComponentB/>}
     </div>
    </>
  );
}

Although i am not sure why you want to delay the ComponentB for just one rendering cycle.

---

As far as the getBoundingClientRect of ComponentA, there is no such thing, as that depends on what the component actually renders in the DOM. ComponentA in it self is not part of the DOM.

In your specific case, though you could add a ref to the #parent element and use that for the getBoundingClientRect, since it is your "container" element of the ComponentA

function ComponentA(){
  const [renderComponentB, setRenderComponentB] = useState(false);
  const parentRef = useRef(); 

  useEffect(() => {
    setRenderComponentB(true);
  }, []);

  useLayoutEffect(() => {
     const rect = parentRef.current.getBoundingClientRect();
     // do what you want with the rect here
     // if you want to apply values to the ComponentB
     // add them to a state variable and use those when 
     // rendering the ComponentB
  }, [])

  return (
    <>
     <div id="parent" ref={parentRef}>
       {renderComponentB && <ComponentB/>}
     </div>
    </>
  );
}