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 challenge to render components.

Solution

The following is the solution to the challenge, 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