freeCodeCamp Challenge Guide: Compose React Components

Compose React Components


Hints

Hint 1

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


Solutions

Solution 1 (Click to Show/Hide)

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>
        <h1>Types of Food:</h1>
        <Fruits />
        <Vegetables />
      </div>
    );
  }
};

Relevant Links

3 Likes