I have a functional react ponent 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 ponent.

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

I have a functional react ponent 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 ponent.

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

• javascript
• reactjs
• react-functional-ponent

3 Answers 3

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 ponent 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 ponent 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>
    </>
  );
}

Try using conditional rendering, like below :

export default function ComponentA() {
  const [renderComponentB, setRenderComponentB] = useState(false)
  useEffect(() => {
    setRenderComponentB(true);
  }, []);
  return(<div id="parent">
    {renderComponentB && <ComponentB/>}
  </div>)
}

You should call method that returns ponent in render. You do not need useEffect as i understood from your answer.

function ComponentA(){
 function AddComponentB(){
  return <><ComponentB /></>
 }
 return 
  <>
   <div id="parent">
    {AddComponentB()}
   </div>
  </>
}