Unable to pass the challenge Manage State Locally First

Unable to pass the challenge Manage State Locally First
0

#1

Tell us what’s happening:
I click the button Run the Tests but never happens. I refresh the page multiple times and I clicked the button and nothing happens. Even an error message wasn’t been displayed in the screen.

Your code so far


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

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input onChange={this.handleChange} value={this.state.input} />
        <button onClick={this.submitMessage}>Add message</button>
        {this.state.messages.map(message => (<li key={message}>{message}</li>))}
      </div>
    );
  }
};

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react-and-redux/manage-state-locally-first/


#2

I resolved the problem.
Arrow functions are not allowed so I update my code:

constructor(props){
    super(props);
    this.state = {
      input: '',
      messages: [],
    }
  this.handleChange = this.handleChange.bind(this);
  this.submitMessage = this.submitMessage.bind(this);
  }
   
  handleChange(event) {
    this.setState({
      input: event.target.value,
    })
  }
  submitMessage () {
    this.setState({
      messages: [...this.state.messages, this.state.input],
      input: '',
    })
  }