Write a React Component from Scratch Not Rendering

JavaScript
1

Tell us what’s happening:
I’m working on the challenge and feel that the code is correct. However, I keep getting an error stating that the Target Container is not a DOM Element. I’ve compared it to an earlier hint to make sure I have the syntax written correctly. Though I’m still running into the error.

Your code so far


// change code below this line

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

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

ReactDOM.render(<MyComponent />,'challenge-node')
// ReactDOM.render(<TypesOfVehicles />,'node-id')


// class TypesOfVehicles extends React.Component {
//     constructor(props) {
//         super(props);
//     }
//     render() {
//         return (
//           <div>
//           <h1>Types of Vehicles:</h1>
//           <Car />
//           <Motorcycle />
//           </div>
//         );
//     }
// }
// ReactDOM.render(<TypesOfVehicles />,'node-id')

Your browser information:

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

Link to the challenge:

2

The second argument should be a DOM element (not a string), like what you’d get by calling document.getElementById()

3

Hello, Kevcomedia Thanks for helping out. It states in the instructions that ‘challenge-node’ is a class of a <div> that would render <MyComponent /> isn’t that like declaring the DOM element. (There is a div with id='challenge-node' available for you to use.)

I was using the example given in an earlier example as a guide:
ReactDOM.render(<TypesOfVehicles />,'node-id')

4

But you need to retrieve that DOM element so you can pass it to ReactDOM.render. That’s what document.getElementById() is for:

ReactDOM.render(<Component />, document.getElementById('root-id'));
1 Like
5

I see!! Thank you very much!!