CODEWITHSUNDEEP
javascriptreactjsreact-functional-component
Sakaggi
Sakaggi

Reputation: 95

react - Add a component after main component has loaded

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.

Upvotes: 1

Views: 3819

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196227

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

Upvotes: 3

yabadabaduhast
yabadabaduhast

Reputation: 109

You should call method that returns component 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>
  </>
}

Upvotes: 0

Reza Ghorbani
Reza Ghorbani

Reputation: 537

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>)
}

Upvotes: 3

Related Questions