React: Compose React Components, unnecessary code?

JavaScript
1

Tell us what’s happening:
Am I wrong in assuming that there is unnecessary pregenerated code in this challenge? Or, is it necessary to render the Fruits class component and then render it again in the TypesOfFood class component?

Your code so far


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>
    );
  }
};

Wouldn’t the Fruits component just simplify to:


const Fruits = () => {
  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>
    );
  }
};

And then get rendered by the TypesOfFood class component? I tried the simplified version above and it also passed the challenge. Is there any reason to render both components other than you might run into a case where you want to render Fruits by itself and not within TypesOfFood?

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/compose-react-components

2

I tried the simplified version above and it also passed the challenge.

That version would work too, I think they are just using the class syntax to get people used to it. Generally if you don’t have state you can use a functional stateless component (the simpler version you wrote).

Is there any reason to render both components other than you might run into a case where you want to render Fruits by itself and not within TypesOfFood?

It’s also just the coding style of react to break down parts of your app into separate components and not have any one component do too much, even if you don’t end up reusing the separate components.