Page keeps freezing both on Desktop Macbook and Android, both on Chrome and firefox

JavaScript
1

Tell us what’s happening:

I keep trying to get past “Create Component with Composition” in the React Lesson but it’s been freezing my computer AND my phone for the past 2 hours tonight. This is ridiculous, FCC. And very frustrating especially when I am supposed to be on a schedule and now I have wasted 2 hours of my life because of this.

Your code so far


const ChildComponent = () => {
return (
  <div>
    <p>I am the child</p>
  </div>
);
};

class ParentComponent extends React.Component {
constructor(props) {
  super(props);
}
render() {
  return (
    <div>
      <h1>I am the parent</h1>
      { /* change code below this line */ }


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

Your browser information:

User Agent is: Mozilla/5.0 (Android 8.1.0; Mobile; rv:68.0) Gecko/68.0 Firefox/68.0.

Challenge: Create a Component with Composition

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/react/create-a-component-with-composition

2

What is solution that you adding between the comments?

I just tried it and am not having seeing any issues (I’m using Windows, Chrome browser)

3

Im using macbook and android samsung. I keep trying to type
< parentComponent. >

but before I even can finish it automatically freezes. Every time. The lesson after freezes too. Both browsers. Both devices. Is this some kind of joke that it’s only not working for me?

5

If you insert <ParentComponent /> into itself, then you are provoking an endless loop.

3 Likes
6

…yup; That crashed my Chrome.

7

I am using Firefox and Chrome on both devices (2 devices x 2 browsers) and it freezes on all 4 attempts. I am not typing a endless loop. All I typed was < ParentComponent>< ChildComponent/>< /ParentComponent> and it instantly freezes .
I’ve pretty much given up on FCC and have moved onto CodeAcademy and w3schools to finish learning React.

8

The problem is that you are calling <ParentComponent> inside of the ParentComponent and causing the endless loop like @miku86 said.

You should only be entering <ChildComponent />

9

When the name of your Component is ParentComponent,
and you put <ParentComponent>...</ParentComponent> into its render function,
you create an infinite loop.

And that’s what you did.

10

But in the example, it shows this:

return (
 <App>
  <Navbar />
  <Dashboard />
  <Footer />
 </App>
)

So I am just going based on this format.

And it has “change code below/above this line” written where I am adding the code.

Can someone just tell me what the solution actually is then?

11

If you look back two comments up you already got the answer. Just put <ChildComponent /> between the two comments inside the ParentComponent class.

Not sure why the example code makes you think you can render a component inside itself. Do you understand why that isn’t possible?

1 Like
12

Ok it worked! I didn’t realize I was putting < parentcomponent /> inside of its own function. My fault for not reading carefully. #n00bproblems

13

It took my going through a more in depth, step-by-step React lesson on another tutorial website to realize I skimmed this exercise without seeing that ParentComponent was already inside itself. I was totally new to React at when I had this issue + I was rushing because I had a deadline to learn it for a project.

14

Good to hear you figured it out.

React takes time to learn and it’s not the easiest thing to rush. The good news is, it’s super popular so you won’t have a hard time finding learning resources.

1 Like