Compose React Components-passing on fcc but not on codepen

JavaScript
1

Tell us what’s happening:
I passed this challenge on FCC but cannot see the output on my codepen even after setting up the babel there. My codepen link for this challenge is : [https://codepen.io/meeramenon07/pen/vYBgrBp]

Your code so far


class Fruits extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h2>Fruits:</h2>
        { /* change code below this line */ }
              <NonCitrus />
              <Citrus />
         { /* change code above this line */ }
      </div>
    );
  }
};

class TypesOfFood extends React.Component {
  constructor(props) {
     super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        { /* change code below this line */ }
         <Fruits />
         <Vegetables />
        { /* change code above this line */ }
         
      </div>
    );
  }
  
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.

Link to the challenge:

2

The issue is that FCC (in order to make things easier for you) is hiding some of the code that you don’t need to worry about. The code for Vegetables, NonCitrus, and Citrus are defined outside of your code window and is invisible to you.

If you want to work in codepen (or wherever) you’ll need to define them. Here is a sample if you want to get started:

class NonCitrus extends React.Component {
  render() {
    return (
      <div>
        <h3>Non-Citrus</h3>
        <ul>
          <li>apple</li>
          <li>banana</li>
        </ul>
      </div>
    );
  }
}

class Citrus extends React.Component {
  render() {
    return (
      <div>
        <h3>Citrus</h3>
        <ul>
          <li>orange</li>
          <li>lemon</li>
        </ul>
      </div>
    ); 
  }
}

class Vegetables extends React.Component {
  render() {
    return (
      <div>
        <h2>Vegetables</h2>
        <ul>
          <li>cucumber</li>
          <li>bell pepper</li>
          <li>carrots</li>
        </ul>
      </div>
    );
  }
}
3

oH! Got it now! Thanks so much for pointing out…Thats precisely the reason!