Frontend certificate - React display not working

Tell us what’s happening:
Describe your issue in detail here.

Hi, i have been working on frontend development certificate for a few days now. Im working the part with react now. The issue is that the window that displays frontend does not work. Anytime i press a button or type anything in a form it just goes blank and i get an error. I have had no issues with other certificates only this one with react. I had the same issue on all of my tasks so far and im on task 28 now.

The error different from task to task. Heres my current one:

Potential infinite loop detected on line 1. Tests may fail if this is not changed.
{ [Invariant Violation: Minified React error #152; name: ‘Invariant Violation’, framesToPop: 1 }
Error, open your browser console to learn more.
Your code so far

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
   
      this.handleChange = this.handleChange.bind(this);
  
  }

  handleChange(event){
    this.setState({
      input: event.target.value
    });
  }

  render() {
    return (
      <div>
      
        <input value={this.state.input} onChange={this.handleChange}/>
    
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Your browser information:

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

Challenge: React - Create a Controlled Input

Link to the challenge:

Welcome there,

We are aware of this issue, and are discussing a fix for it:

For the time being, I suggest testing locally or on a different platform/editor (Codesandbox, Replit).

Hope this clarifies.

2 Likes

I’m a noob, so I’m just guessing here, but while I was working on the React-Redux certifications on CodePen, I kept getting an error message saying that “Redux isn’t defined”. I went to Settings and confirmed that the first Redux CDN that pops up when looking up “Redux” was installed but, when I followed the link, it gave me a 404 error, as if that version had been discontinued or something. Maybe this is related to the issue fCC is experiencing?
I managed to get it working on CodePen by adding a different version of Redux.

This is the faulty link to Redux that CodePen offers by default:
https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.1/redux.legacy-esm.js

And this is the one that actually works:
https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.1/redux.js

1 Like

Thank you, @rodrigo-hlc .

We already have a fix for the issue, and it had to do with some custom tooling we use to prevent Campers from writing infinite loops and crashing the browser.

1 Like

Hi anyone,

I’m doing the react lessons: /learn/front-end-development-libraries/#react

Most lessons return:

Potential infinite loop detected on line 1. Tests may fail if this is not changed.
{ [Invariant Violation: Minified React error #152; visit https : // reactjs . org /docs/error-decoder.html?invariant=152&args=MyComponent for the full message or use the non-minified dev environment for full errors and additional helpful warnings. ] name: ‘Invariant Violation’, framesToPop: 1 }
Error, open your browser console to learn more.

For example in the lesson: learn/front-end-development-libraries/react/use-the-lifecycle-method-componentdidmount

My code is:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeUsers: null
    };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        activeUsers: 1273
      });
    }, 2500);
  }
  render() {
    return (
      <div>
        {/* Change code below this line */}
        <h1>Active Users: {this.state.activeUsers}</h1>
        {/* Change code above this line */}
      </div>
    );
  }
}

I have that same result in the console after the setTimeout is executed.

Any ideas if it’s on my side?

I’m using: Chrome. Version 116.0.5845.187 (Official Build) (arm64)

Welcome @ryanothelo ,

We have a fix for this. It should be in the next deployment of the platform.

1 Like

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