Can't Submit Code in React: Create a Component With Composition

freeCodeCamp Support
1

Hi, I’m not sure why but this particular challenge is really causing an issue on my end. After I submit my code I am unable to submit and check if it’s correct. I’ve tried Safari, Chrome, Firefox on two Macs and Safari on iPadOS. Not sure why this is but maybe you can fix it for me? Much appreciated!

2

I’m sorry, but I don’t get what you mean. It freezes after you submit the solution without any output to the console? Or what happens there?

3

Ok, I’ll try and explain more. I have the code typed in but I cannot pass the tests. I might get a running tests update from the console, but it doesn’t seem to move on from there for whatever reason. I don’t get rejected but after that point it simply seems unusable and the only way to get the site going and stable again is to close that and move on to some other material. This is consistent no matter where I use it. Really strange.

4

please provide the challenge link and your code

5

My Code:

<ParentComponent>
       <ChildComponent />
</ParentComponent>
6

Please paste all of your code. We cannot tell where you have placed that in the editor.

7

That page causes huge problems for my machine. I am not able to copy it after going and selecting it multiple times trying to do so. It becomes unresponsive. I was able to take a screenshot, that’s the best I can do.

Screen Shot 2020-07-14 at 9.10.14 AM
Screen Shot 2020-07-14 at 9.10.14 AM936×907 44.9 KB

8

You are causing an infinite loop by rendering the <ParentComponent> within the ParentComponent. So, it is calling itself many, many times over.

Be careful with the terminology in the intstructions:

Compose the two together by rendering the ChildComponent within the ParentComponent .

Hope this clarifies.

9

This works for me. Remove the ParentComponent tags and just have the ChildComponent:

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 */ }
          <ChildComponent />

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

I feel very foolish, but thanks!!

1 Like
11

Don’t worry about it. I have only been up for a few hours and have done multiple silly things posting on here this morning already.

1 Like