Fruits and Vegetables, Nesting React Components

This is a snippet based on React nesting challenges. It uses its code with copied and changed components.
Fruits holds typesOfFruit and Vegetables holds typesOfVegetables components. Add Fruits and Vegetables components to Types of Food.
The code seems to have problems. Nothing displays. What can be done?


//Use React to Render Nested Components, Compose React Components from React modules from freeCodeCamp
//Fruit and vegetable version
const TypesOfFruit = () => {
  return (
    <div>
      <h2>Fruits:</h2>
      <ul>
        <li>Diospyros kaki, damgam</li>
        <li>Diospyros kaki, hongsi</li>
        <li>Cucumis melo, chamoe</li>
        <li>Vitis labruscana, kyoho buohduoh</li>
      </ul>
    </div>
  );
};

const Fruits = () => {
  return (
    <div>
      { /* Change code below this line */ }
      <TypesOfFruit />
      { /* Change code above this line */ }
    </div>
  );
};

const TypesOfVegetables = () => {
  return (
    <div>
      <h2>Vegetables:</h2>
      <ul>
        <li>Glebionis coronaria, sukkat</li>
        <li>Spinacea oleracea, shigumchi namul</li>
        <li>Glycine max, kkongnamul</li>
        <li>Aster scaber, chwinamul</li>
      </ul>
    </div>
  );
};

const Vegetables = () => {
  return (
    <div>
      { /* Change code below this line */ }
      <TypesOfVegetables />
      { /* Change code above this line */ }
    </div>
  );
};

class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  render()  {
return (
  <div>
    <h1>Types of Food:</h1>
    <Fruits />
    <Vegetables />
  </div>
  );
}
    };
ReactDOM.render(<TypesOfFood />, document.getElementById("root"));

Link to CodePen
2021-03-27-types-of-food-1-react.js (codepen.io)

  **Your browser information:**

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

Challenge: Use React to Render Nested Components

Link to the challenge:
Learn React: Use React to Render Nested Components | freeCodeCamp.org

Looking at your Codepen, you seem to still not understand how to comment some code.

/*
Notes
<p>First, I would test my code for typos using a freeCodeCamp editor or some editor that does not require a set up for React. Second, I would set up Babel to process JSX. Third, react and react-DOM libraries would be added.</p>
<code>
//<Vegetables />
/*<Vegetables />*/
{/*<Vegetables />*/}</code>
<p>One of them is the syntax for code comments in React.</p>
<code>//Instructions as many as those for intermediate origami</code>
<p>Strings can be commented out with JS comments.</p>
<p>No display. Work in progress.</p>
<code></code>
<p></p>
*/

If you want the above section commented out, you can simply use:

/*
Notes
<p>First, I would test my code for typos using a freeCodeCamp editor or some editor that does not require a set up for React. Second, I would set up Babel to process JSX. Third, react and react-DOM libraries would be added.</p>
<code>
<Vegetables />
<Vegetables />
<Vegetables />
</code>
<p>One of them is the syntax for code comments in React.</p>
<code>//Instructions as many as those for intermediate origami</code>
<p>Strings can be commented out with JS comments.</p>
<p>No display. Work in progress.</p>
<code></code>
<p></p>
*/

JSX comments are different than JavaScript comments.

The Notes section is intentionally left out of the copied code for the question. Those are asides about mistakes with commenting showing different errors that were made. These are comments in React.

{//single line}, {/*multi-
grain*/}

That is not a multi-line comment in JavaScript.

You are right @RandellDawson. It has been put inside the code format for the asterisks to appear.

This displays in the freeCodeCamp editor yet not on CodePen. Babel, React, and ReactDOM are set up. Does anyone know how to fix this?

By “this” do you mean the code you posted in the Codepen? If so you still have invalid comment code at the bottom. If you just delete that (or fix it) it should render.

Thank you. @RandellDawson, good eyes. Keeping the braces on is important, so the notes with {//} was moved to HTML.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.