Manage State Locally First - does not pass button test

JavaScript
1

Tell us what’s happening:

Clicking the Add message button should call the method submitMessage which should add the current input to the messages array in state.

Can not realize what is wrong. Would be thankful for help.

Your code so far


class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    };
    ['handleChange','submitMessage','render'].forEach((x) => {
      this[x] = this[x].bind(this);
    });
  }
  // add handleChange() and submitMessage() methods here
  handleChange (e) {
    this.setState({input: e.target.value, messages:this.state.messages});
  }
  submitMessage(e){
    this.setState({messages:this.state.messages.concat(e.target.value), input: ''})
  }
  
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <input onChange={this.handleChange} value={this.state.input}/>
        <button onClick={this.submitMessage}>Add message</button>
        <ul>
          {[].concat(this.state.messages).map((i) => {(<li>{i}</li>)})}
        </ul>
        { /* change code above this line */ }
      </div>
    );
  }
};

Your browser information:

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

Link to the challenge: