Component from scratch returns Build Errors

[eye_was]

-I am receiving the Error Message as follows:
Build error, open your browser console to learn more

Watching the tutorial video online here: Write a React Component from Scratch - React - Free Code Camp - YouTube

I notice that he only colon he uses is when he renders the component to the ReactDom. But if I try to leave the colons out after super(props) and render(), I get an error message telling me to put the there specifically. What am I doing wrong?

[lasjorg]

Please post your code (as code) and a link to the challenge.

You have semicolons that shouldn’t be there.

[eye_was]

When I post the code as code, which I initially did, it doesn’t show up correctly on this site. I’ll paste it here anyway and hope for the best.

Here goes:

class MyComponent extends React.Component {
    constructor(props) {
      super(props); {
        render(); {
          return(
            <div>
              <h1>My First React Component!</h1>
              </div>)
        }
      }
    }
}

ReactDOM.render(<MyComponent />, document.getElementById("challenge-node"));

Link to the challenge: https://www.freecodecamp.org/learn/front-end-development-libraries/react/write-a-react-component-from-scratch

[eye_was]

Also, I explain why the semicolons are there in the original post. I know they don’t belong. They aren’t in any of the tutorials I’ve watched, but if I don’t put them there, I get a syntax error demanding them in those exact spots.

[eye_was]

[eye_was]

At least the code seems to have shown up correctly on here this time around. The first time, it displayed the h1 element as an actual h1 element instead of showing the code. Weird.

[lasjorg]

You have multiple errors.

1. super() should not be a function definition, just a call to it inside the constructor.

2. The render method does not belong inside the constructor and it is a definition and does not have ; after the parentheses.

State and Lifecycle – React

Classes - JavaScript | MDN

React Course - Beginner's Tutorial for React JavaScript Library [2022]

[eye_was]

Thank you for your help. I changed the code as such, and it worked:

class MyComponent extends React.Component {
    constructor(props) {
      super(props) 
}

        render()
          return(
            <div>
              <h1>My First React Component!</h1>
              </div>)
        
    }
}

ReactDOM.render(<MyComponent />, document.getElementById("challenge-node"));

[lasjorg]

You seem to be missing the opening { for your render() but I’m guessing it isn’t missing in the code you submitted.

Other than that it looks correct.

[eye_was]

Oh wow, you’re right. I didn’t even notice that. Thanks again!