Render a Class Component to the DOM Error - **Target container is not a DOM element.**"

Tell us what’s happening:
So I’m recieving this error for the below solution which is after checking is identical to the one in the Hint section,

Error “https://reactjs.org/docs/error-decoder.html/?invariant=200” which says" Target container is not a DOM element."

Any idea why?

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 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.9 Safari/537.36.

Link to the challenge:

ReactDOM.render(<TypesOfFood />, 'challenge-node');
‘challenge-node’ is a string, you want to give React a DOM node.

1 Like

That’s simple@r.wad first check whether the challenge-node dom is your index.html if it is.
Than just get the element of the dom node i.e challenge-node. check below.
ReactDOM.render(, document.getElementById(‘challenge-node’));