Manage State Locally First issues with submitMessage()

JavaScript
1

Tell us what’s happening:

I keep getting this error message (Clicking the Add message button should call the method submitMessage which should add the current input to the messages array in state. ) indicating that not all criteria has been fulfilled by my code

Your code so far


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

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

  }

  
  submitMessage(event){
    event.preventDefault();
    this.state.messages.push(this.state.input);
    this.setState({ input : ""});
  }

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <ul>
        {this.state.messages.map((msg)=>{
          return <li>{msg}</li>
        })}
        </ul>
        <input value = {this.state.input} onChange = {this.handleChange.bind(this)} />
        <button  onClick = {this.submitMessage.bind(this)}>Add message</button>

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36.

Link to the challenge: