React - Set State with this.setState

JavaScript
1

Tell us what’s happening:

The Editor failed to execute and reported it as

Potential infinite loop detected on line 1. Tests may fail if this is not changed.
{ [Invariant Violation: Minified React error #152; visit …/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.

Describe your issue in detail here.

The editor has reported:

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.

Get Help

Tests

  • Waiting:The state of MyComponent should initialize with the key value pair { name: Initial State }.

  • Waiting:MyComponent should render an h1 heading element.

  • Waiting:The rendered h1 heading element should contain text rendered from the component’s state.

  • Waiting:Calling the handleClick method on MyComponent should set the name property in state to equal React Rocks!.

this.setState({

name: ‘React Rocks!’

});

// change code above this line

}

render() {

return (

handleClick() {

// change code below this line

(this);

}

};

this.handleClick = this.handleClick.bind

this.state = {

name: ‘Initial State’

Potential infinite loop detected on line 1. Tests may fail if this is not changed.

Your code so far

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Initial State'
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    // change code below this line
    this.setState({
      name: 'React Rocks!'
    });
    // change code above this line
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me</button>
        <h1>{this.state.name}</h1>
      </div>
    );
  }
};

Your browser information:

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

Challenge: React - Set State with this.setState

Link to the challenge:

2

Have some information, may help you :sweat_smile: :

act(…) is not supported in production builds of React, and might not behave as expected.

Error Decode

3
4

thank you! I was able to run the tests in the editor though and go ahead with next chapters for now. :grinning:

5

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