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 (
            className="site-layout-content text-al"
            style={{ background: "#a8071a" }}

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

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

Published by


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: Logo

You are commenting using your 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.