freeCodeCamp/guide/english/certifications/front-end-libraries/react/compose-react-components/index.md

title
Compose React Components

Compose React Components

Hint

Use nested components as in the previous challemge to render components.

Solution

The following is the solution to the chakkenge, where it render Citrus and NonCitrus in a component which is then rendered in another:

class Fruits extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h2>Fruits:</h2>
        <NonCitrus />
        <Citrus />
      </div>
    );
  }
};

class TypesOfFood extends React.Component {
  constructor(props) {
     super(props);
  }
  render() {
    return (
      <div>
        <Fruits />
        <Vegetables />
      </div>
    );
  }
};

Relevant Links:

• Components and Props
• Nested Components