Help with React please!

Tell us what’s happening:

If you look at the code below, I tried to render it, but the challenge wouldn’t let me pass. It kept on giving me the error
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.
I also used getElementById() for the renderer, but It said getElementById is not defined.

Your code so far



class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  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 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.

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

The second argument for ReactDOM.render expects a call to document.getElementById, not just a string.

1 Like

You should use a query selector for render method.

try using document.querySelector('#challenge-node') instead

2 Likes

Thank you! solved the challenge!

@kevcomedia and @mnichols08, thank you so much for your help!

1 Like