Passing A Jsx component to another jsx component as props

Question

If I'm passing a jsx component(A) to another component(B) as a prop, like this:

import A from "A.jsx";
import B from "B.jsx";
...
class MyClass extends React{
...
  render(){
    return <B customContent={A} />
  };
}

when component B gets updated in React life-cycle, will A gets updated too?

Answer 1

In React when a component is rendered all its child components will be rendered too .

In your case when you pass component A to B as an attribute component A will be passed to Component B as a regular object and will not be rendered .

for ex: if you passed function instead of component A it will not be executed untill you call it from the component B.

if you need to render a component inside another dynamically you should use children property on the props object let me show you :

At My Class

  class MyClass extends React{
    ...
      render(){
        return <B > 

                 <A />

               </B>
      };
    }

At Component B

You can do the following :

 class B extends Component{
    ...
      render(){
        return
                <React.Fragment> 

                 {this.props.children}

               </React.Fragment>
      };
    }