Write a React Component from Scratch 5

JavaScript
1

Tell us what’s happening:
I’m having a hard time trying to figure out how to do this lesson. I looked at the hint, and so far, I’m in a conundrum where I cannot figure out how to do this.

Your code so far


// change code below this line
class MyComponent extends React.Component {
    
}

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:

2

OK, the instructions are:

Define a class MyComponent that extends React.Component . Its render method should return a div that contains an h1 tag with the text: My First React Component! in it. Use this text exactly, the case and punctuation matter. Make sure to call the constructor for your component, too.

Render this component to the DOM using ReactDOM.render() . There is a div with id='challenge-node' available for you to use.

So, I see the steps as:

  1. Define the class.
  2. Give it a render method that returns that JSX
  3. Give your class a constructor. (I’m not sure why - it doesn’t need one.)
  4. Render it to the DOM.

I see that you have done step 1. How about step 2? Do you know what a render method is and where to put it? Refer back to this lesson if you need to, or check the internet. As a professional developer, I look things up on the internet several times a day.

Don’t give up. React is hard and it is a very different way of thinking. But once you get used to it, it is pretty cool and very powerful. And it landed me a great job, so I love it.

So, get step 2. If you get stuck again, let us know.

2 Likes
3

Hello. Sorry for just now responding. I’ve been so busy with school, that I haven’t been able to get on here and check my messages. Here is my new code:

// change code below this line
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <h1>My First React Component!</h1>
        );
    }
};
4

Looks like your on @kevinSmith step 4:

Render this component to the DOM using ReactDOM.render(). There is a div with id='challenge-node' available for you to use.

You need to keep working on the steps.

One thing from earlier challenges that was mentioned was “One important thing to know about nested JSX is that it must return a single element”. So, I just always put everything in a div element to get used to it because there will probably be more than one element to be rendered in practice. I don’t know if this will affect testing because you only have one element anyway.

5

I actually forgot how to do the DOM, since it’s been a while since I’ve been on here. I’ve been so busy with school, I’m trying to keep track of what I do on here as well. My professor sent me to this website to learn code, and I can tell her that I got to the React lessons, and she will be proud, I just know it!

But I will try to do a DOM, if I can figure it out.

6

There was a previous challenge that showed you how to do this:

https://learn.freecodecamp.org/front-end-libraries/react/render-html-elements-to-the-dom

7

I forgot how to create one, and the previous lesson confuses me. This is my code:

// change code below this line
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
            <h1>My First React Component!</h1>
            <p>Lets render this to the DOM</p>
            </div>
        );
    }
};
ReactDOM.render(MyComponent, document.getElementByID('My First React Component!'));

What am I doing wrong?

8

You have three problems, all of which are in this line:

ReactDOM.render(MyComponent, document.getElementByID('My First React Component!'));
  1. First and most obviously, the pseudo-console on FCC is telling you:

// running tests
document.getElementByID is not a function
document.getElementByID is not a function
document.getElementByID is not a function
// tests completed

That is correct - it should not be document.getElementByID but should be document.getElementById - notice the last letter. It is a subtle but important difference.

  1. It may not have been clear, but you can’t pass a component name to the ReactDOM.render method, but JSX. This may be a little confusing from the previous example I linked where they store some JSX in a variable. But here:
 ReactDOM.render(MyComponent, ...

… you are passing the name of the class component, instead of instantiating it as JSX, What you need is <MyComponent />.

  1. You need to tell the ReactDOM.render method where in the DOM to attach what React is creating. You can’t see the DOM at the moment because it is being provided in the background by FCC, but they tell you what you need to know:

There is a div with id=‘challenge-node’ available for you to use.

But you are trying to target an id of ‘My First React Component!’.

When I make those three changes, your code passes. Let us know if these are insufficient hints.

Don’t worry. React is very confusing when you begin. It’s so different from what you’ve learned before. It is also very powerful and cool once it starts clicking.

9

It keeps saying that the div isn’t defined. Here’s my new code:

// change code below this line
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
            <h1>My First React Component!</h1>
            <p>Lets render this to the DOM</p>
            </div>
        );
    }
};
ReactDOM.render(<MyComponent />, div(id='My First React Component!'))

Do I need to do the <> again for the div?

10

it should not be document.getElementByID but should be document.getElementById - notice the last letter. It is a subtle but important difference.

You just needed to correct the spelling for the second argument to the ReactDOM.render function – I’m not sure where you’re getting div(id='My First React Component!') from.

That function takes a JSX element as it’s first argument (which you’ve fixed and is now fine), and a refence to the DOM element you want to render it to as the second argument.

1 Like
11

That and the ID shouldn’t be ‘My First React Component!’ but should be ‘challenge-node’.

12

I just tried that, and got it wrong again. Here’s my updated code:

// change code below this line
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
            <h1>My First React Component!</h1>
            <p>Lets render this to the DOM</p>
            </div>
        );
    }
};
ReactDOM.render(MyComponent, document.getElementById("challenge-node"))

What else am I doing wrong now? I’m so confused!

13

Remember that MyComponent is a component so you need to pass it as a component to ReactDOM.render, not just its name.

ComponentToRender <-- name
<ComponentToRender /> <-- component

Just like you were shown how to in the challenge that came right before.

React: Render a Class Component to the DOM

React components are passed into ReactDOM.render() a little differently than JSX elements. For JSX elements, you pass in the name of the element that you want to render. However, for React components, you need to use the same syntax as if you were rendering a nested component, for example ReactDOM.render(<ComponentToRender />, targetNode). You use this syntax for both ES6 class components and functional components.

14

I figured it out once my brain started working again. But thanks for the help, anyways. I’m now on a new one and stuck, so I’m going to make a new forum once I try to figure it out first.

1 Like