Render a Class Component to the DOM

JavaScript
1

Tell us what’s happening:
I have these output instead go next
Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Your code so far



class TypesOfFood extends React.Component {
 
  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
ReactDOM.render(<TypesOfFood />, 'challenge-node')

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0.

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

2

The second thing you pass to ReactDOM.render is a DOM node (like the output of document.getElementById())

3 Likes
3

sometimes brain don’t see own mistake. thank.

4

In my opinion the code hint showing 'node-id' as the argument here seems a bit misleading:

While the hint to use document.getElementById(‘id’) helps, I can see it being confusing for beginners since this is the lesson where they have to use ReactDOM.render for the first time.

I think it’d be better if the code hint just had document.getElementById(‘node-id’) instead of just 'node-id' as the argument

1 Like