Render a Class Component to the DOM

Tell us what’s happening:
I have these output instead go next
Minified React error #200; visit 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 (
        <h1>Types of Food:</h1>
        {/* change code below this line */}
         <Fruits />
         <Vegetables />
        {/* change code above this line */}

// 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:

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


sometimes brain don’t see own mistake. thank.

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