Render a Class Component to the DOM 5

JavaScript
1

Tell us what’s happening:
Stuck on this code. I finally was able to get everything to work. Turns out I had to restart my laptop with a clean slate. But how in the world am I getting this wrong? I looked at the hints, and I do not understand it.

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 */}
        <Fruits />
        <Vegetables />
        {/* change code above this line */}
      </div>
    );
  }
};

// change code below this line
document.getElementById('id')

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.80 Safari/537.36 Avast/75.0.1447.81.

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

2

The problem is the line below:

document.getElementById('id')

Look at the challenge description for how to actually render the component <TypesOfFood />

All you are doing above is attempting to reference an element with id=“id”. There is no element with such an id in this particular challenge. The instructions tell you exactly which id to use.

3

I still don’t understand. I’m sorry. My learning disabilities are kicking in, and I’ve had a rough day today. Too much going on lately that coding is somewhat keeping me from lashing out at everyone.

4

Our class TypesOfFood extends React.Component . React component we can pass into ReactDOM.render() with two parameters.
First parameter is a component that we want to render. It is our class TypesOfFood.
We should pass our component like a selbst closing html tag, it is not good to pass just a name of component.
Second parameter is a target node, that look likes as document.getElementById(‘id’)
but instead of div id=‘id’ we need to pass a div with other id.

5

So, you’re saying a div inside a div? Your explanation confused me a tad bit.

6

Here’s a refresher on the syntax: ReactDOM.render(componentToRender, targetNode). The first argument is the React component that you want to render. The second argument is the DOM node that you want to render that component within.

You do it exactly the same way as you already did in this challenge only this time you pass in the TypesOfFood component as the first argument.

ReactDOM.render(<ComponentName />, document.getElementById('The-name-of-the-id-you-are-asked-to-use'))

7

We want to render a react component, that inside of ReactDOM.render function we can pass as <TypesOfFood /> and we have a div with id=‘challenge-node’. (We have any div with id=‘id’ and any div inside of other div).

8

So, you just use the

ReactDOM.render(<TypesOfFruit />, document.getElementById('challenge-node'))

as the callback code?

9

Yes, but the component name is TypesOfFood not TypesOfFruit

10

I meant to say TypesOfFood instead of TypesOfFruit. My typos are crazy due to school getting to me.

11

Tell us what’s happening:
I have no clue what I’m doing wrong. I’m doing as a lot of you told me to, but it’s not working for some unknown reason, unless I have to change a bit of the coding again.

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 */}
        <div id='challenge-node' />
        {/* change code above this line */}
      </div>
    );
  }
};

// change code below this line
ReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'))

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.80 Safari/537.36 Avast/75.0.1447.81.

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

12

Read the instructions carefully.
Right now you are trying to sort of render an element into itself.

The components that you need to create, are not the same ones that you need to mount React component into.

13

I still don’t get it. Sorry, I have a learning disability that makes it hard to understand things. Plus, when I went to try a different code, it froze up on me, the page of the lesson did.

14

Put the <Fruits /> and <Vegetables /> components back like you had them before. Keep the ReactDOM.render like you have it now.

15

It still didn’t work. I don’t understand how to do this lesson.

16

Unless you post your code, we can not tell what you have tried.

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

// change code below this line
ReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'))'
18

What is the purpose of this line?

19

I’m not really sure.

20

Do the instructions tell you to add that div?