To return or not to return, that is the question

[mjcolyer]

just wondering why the solution required a “return” when calling <TypesOfFruit /> but no return when calling <Fruit />

  **Your code so far**

const TypesOfFruit = () => {
return (
  <div>
    <h2>Fruits:</h2>
    <ul>
      <li>Apples</li>
      <li>Blueberries</li>
      <li>Strawberries</li>
      <li>Bananas</li>
    </ul>
  </div>
);
};

const Fruits = () => {
return (
  <div>
    { /* Change code below this line */ }
    return <TypesOfFruit />
    { /* 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 />
      { /* 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/90.0.4430.93 Safari/537.36.

Challenge: Use React to Render Nested Components

Link to the challenge:

freeCodeCamp.org

[DanCouper]

@mjcolyer

  <div>
    { /* Change code below this line */ }
    return <TypesOfFruit />

That’s not valid syntax, you returning the whole block of JSX

That code there is exactly the same as:

React.createElement("div",  null, [
  React.createElement(return TypesOfFruit, null, null)
]);

Which doesn’t make sense, it’s completely invalid JS syntax

[gaac510]

Not sure what you are asking, but your quoted code results in the word “return” showing between h1 and h2. It still passes the test but logically the word shouldn’t be there.

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

You don’t need the return before <TypesOfFruit />.

[lasjorg]

I edited your post. It didn’t make much sense without the component code visible.

---

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).