Render a Class Component to the DOM - fail

Tell us what’s happening:
Hi, all searchs say that the code below is correct but it fails the test

ReactDOM.render(;, document.getElementById(“challenge-node”) )

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 />, document.getElementById("challenge-node"));

Your browser information:

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

Link to the challenge:

JSX tags should not have any trailing semicolons :slight_smile:

Thanks joops75,
I removed the end semicolon but test still failed:

ReactDOM.render(, document.getElementById(“challenge-node”))

I don’t know where you’re getting ReactDOM.render(, document.getElementById(“challenge-node”)) from.

In your code you use ReactDOM.render(<TypesOfFood />, document.getElementById("challenge-node")); which is correct. Then all you need to do is remove the trailing semicolon in your JSX and your solution passes.

Sorry, not sure why it pasted like that. It should read:

ReactDOM.render(, document.getElementById(“challenge-node”))

Did it again, leaves out for some reason

Not sure what’s happeneing.
I’m trying to post the last line of my code without the final semicolon which fails the test

The last line of your code is not JSX. The render function returns JSX. The line I was referring to was <Fruits />;

See this quote. You must remove the semicolon

When posting code use the correct formatting.

Anyway, as already answered, if you remove the semicolon after the <Fruits /> component you should pass.

1 Like