React and Redux - Manage State Locally First

JavaScript
1

I get this error:
“Potential infinite loop detected on line 1. Tests may fail if this is not changed.
{ [Invariant Violation: Minified React error #152; visit reactjsorg/docs/error-decoder.html?invariant=152&args=DisplayMessages 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.”

I started writing my code and got this error several times before giving up. Then i went to the sollutions and copied the complete answer code and got the same error.

Your code so far

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  }
  // add handleChange() and submitMessage() methods here
  handleChange(event){
    this.setState({
      input: event.target.value,
      messages: this.state.messages
    })
  }

  submitMessage(){
    this.setState({
      input: '',
      messages: [...this.state.messages, this.state.input]
    })
  }

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <input onChange={this.handleChange.bind(this)} value={this.state.input}/>
        <button onClick={this.submitMessage.bind(this)}>Submit</button>
        <ul>
          {this.state.messages.map((x, i)=>{
            return <li key={i}>{x}</li>
          })}
        </ul>
        { /* change code above this line */ }
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: React and Redux - Manage State Locally First

Link to the challenge:

2
3

La función handleChange no está configurada correctamente. Debería actualizar el estado con el nuevo valor del campo de entrada (input), pero actualmente está intentando mantener el valor antiguo y no está utilizando el nuevo valor del evento.

4

class DisplayMessages extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ‘’,
messages:
};
// Bind the methods to the component instance
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
}

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

submitMessage() {
this.setState({
input: ‘’,
messages: […this.state.messages, this.state.input]
});
}

render() {
return (


Type in a new Message:



Submit

    {this.state.messages.map((x, i) => {
    return
  • {x}
    • ;
    })}


);
}
}

5

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