A question aboout Render a Class Component to the DOM

JavaScript
1

Tell us what’s happening:
I’d like to know what he Fruits and Vegetables components behind the scenes look like, because I tried to make it in scrimba.com and codepen.io and can’t figure it out.
Here’s what I tried:
const TypesOfFood = [ [Fruits = "Oranges, Apples"], [Vegetables: "Potatoes, Cabagge"] ],
but nothing works

Your code so far


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

// change code below this line

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/render-a-class-component-to-the-dom

2

Hi @Miodrag09, behind the scene Fruits and Vegetables are most probably React components themselves. Probably something like this:

class Fruits extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <ul>
        <li>Oranges</li>
        <li>Apples</li>
      </ul>
    );
  }
};

class Vegetables extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <ul>
        <li>Potatoes</li>
        <li>Cabbage</li>
      </ul>
    );
  }
};
1 Like
3

They are just function components returning JSX.

const Fruits = () => {
  return (
    <div>
      <h2>Fruits:</h2>
      <h4>Non-Citrus:</h4>
        <ul>
          <li>Apples</li>
          <li>Blueberries</li>
          <li>Strawberries</li>
          <li>Bananas</li>
        </ul>
      <h4>Citrus:</h4>
        <ul>
          <li>Lemon</li>
          <li>Lime</li>
          <li>Orange</li>
          <li>Grapefruit</li>
        </ul>
    </div>
  );
};

const Vegetables = () => {
  return (
    <div>
      <h2>Vegetables:</h2>
      <ul>
        <li>Brussel Sprouts</li>
        <li>Broccoli</li>
        <li>Squash</li>
      </ul>
    </div>
  );
};

I would suggest using something like StackBlitz or CodeSandbox for online react editors. If you post your code so we can see it it would help.

1 Like
4

Here it is: https://stackblitz.com/edit/react-kczn73?file=TypesOfFood.js
idk why there’s Fruits & Vegetables twice, and still works

5

You have the Fruits and Vegetables as both class and function components. You also can not export two defaults like you are. Give each component its own file and export/import them as needed.

You can export more than one component but it is usually better to have one file for each component.

1 Like
6

doesn’t work in localhost. I get this:

./src/TypesOfFood.js  Line 66:  Expected an assignment or function call and instead saw an expression  no-unused-expressionsSearch for the keywords to learn more about each error.
7

oh, changed this:
export default Fruits, Vegetables
to this:
export default (Fruits, Vegetables)
and it’s OK

8

This isn’t right. You want this:

export { Fruits, Vegetables };
import { Fruits, Vegetables } from './TypesOfFood'

Edit: you can only have one default export.

9

but I have both Fruits and Vegetables in one file. and it works

10

Post a link to your current code on StackBlitz like you did before.

Without seeing your current code I would imagine that only Vegetables are being exported. As I understand it, when using parentheses in the export the operands get interpreted as expressions.

To see what I mean you can put this into the browser console.

('one', 'two');
// returns "two"
1 Like
11

https://stackblitz.com/edit/react-kczn73?file=App.js
yes, you’re right

12

made a little correction on your code there:

const One = () => (
  <div>
    <h2>{One}</h2>
  </div>
)
// explicit return
const Two = () => {
  return (
    <div>
      <h2>{Two}</h2>
    </div>
  )
}

export { One, Two };
13

What exactly is it you believe adding {One} and {Two} is supposed to do? You don’t have any variables, props or state that they can be referring so what is the value of One and Two inside the h2?

BTW, I still don’t see your updated code. The code in the stackblitz you have linked to is still wrong.

Edit: you also have this fork of the code I posted, is that the one you are now using?

14

yes, I forked your code. not using it for anything tho.
with {One} and {Two} I just wanted to remove rendering of
“Component One” and “Component Two”

15

They are still being rendered to the page. There is just no text content inside them. If you don’t want them to be rendered don’t use them.

16

oh, you mean like this:

// implicit return
const One = () => (
  <div>
    <h2></h2>
  </div>
)
// explicit return
const Two = () => {
  return (
    <div>
      <h2></h2>
    </div>
  )
}

export { One, Two };
17

They would still get rendered.

I mean don’t use them at all. You don’t need the components to exist at all if you are not going to use them.

If you just want to keep them for reference just don’t import them or use them in the TypesOfFood component. You can comment out the import and the component inside TypesOfFood if you want to keep all the code but not use it.

18

I don’t understand what you saying

19

you mean sumthing like this: https://stackblitz.com/edit/react-i1vumx?file=components%2FTypesOfFood.js
I don’t get it, it returns an error

20

Comments in JSX does not work like that. It will work for the import but not the components.

You can use this.

{
  // <One />
  // <Two />
}

Or this.

{
  /*
    <One />
    <Two />
  */
}