Test crash the page

When i run the test in this challenge the page crash any solution?Could be a chrome problem?

My code so far

class TypesOfFood extends React.Component {
constructor(props) {
  super(props);
}
render() {
  return (
    <div>
      <h1>Types of Food:</h1>
    
ReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'))
     
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

Challenge: Render a Class Component to the DOM

Link to the challenge:

Don’t call ReactDOM.render inside the component. You call it outside.

Hello there,

Let us take a minute to think about what you want this to output. Imagine, instead of TypesOfFood, you have a Box class.

Now, instantiating (creating a new) an instance of a class in React (JSX syntax) looks like this:

<Box />

Now, let us strip back what you have, just for the stuff we care about:

// Defining a Box
class Box {
  render() {
    return <Box />
  }
}
//Rendering a Box using someFunction
function someFunction() {
  return <Box />
}
someFunction(); // Pretend this renders a box on a page

You have a Box class which returns itself. So, what happens when you try to render that?


This is not exactly what you have, but I can see where you got confused. What you currently have would be compiled like this:

class TypesOfFood extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (React.createElement("div", null,
            React.createElement("h1", null, "Types of Food:"),
            "ReactDOM.render(",
            React.createElement(TypesOfFood, null),
            ", document.getElementById('challenge-node'))"));
    }
}

This would be very confusing for React to render, and would lead to unexpected behaviour.

But the idea is still, why do you want to render a component within itself?

Now, have a look at the starter code for this challenge, and see what you might have missed:

class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        {/* Change code below this line */}

        {/* Change code above this line */}
      </div>
    );
  }
};

// Change code below this line

If you are still really confused, here is a hint you can use the interweb to search:

Hope this helps

1 Like

Ty so much for your help, i understand it better now. Have a nice day!

Thanks! That was the problem :sweat_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.