How to render child components in Reactjs


Suppose we have components that called inside another in Reactjs , things can be messy. The parent component not render the child by default. Here is our code with two components.

export default class BackgroundDesign extends Component {
    render() {
        return (
            <div
            className="site-layout-content text-al"
            style={{ background: "#a8071a" }}
             
          />       
        )
    }
}

export default class SiteHeading extends Component {
  render() {
    return (
      <div className="site-layout" style={{ background: "#820014" }}>
        <span
          className="p-2"
          style={{ color: "whitesmoke", "font-size": "28px" }}
        >
          I am a Heading
        </span>
        
      </div>
    );
  }
}
 <BackgroundDesign>
            <SiteHeading/>
                It is a about  page.
            </BackgroundDesign>

In the above BackgroundDesign component we used Site Heading component which is not rendered successfully.

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.