Manage State Locally First - Not Passing, working perfectly fine in my local app

JavaScript
1

Tell us what’s happening:
My code seems to be ok. But still failing for last check.

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

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
submitMessage(event){
  event.preventDefault()
  var m = this.state.messages
  m.push(this.state.input)
  this.setState({
    messages:m,
    input: ""
  })
}
handleChange(event){
  this.setState({input: event.target.value});
}
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <input 
        type = "text"
        onChange={this.handleChange}
        value = {this.state.input}
        />
        <button onClick={this.submitMessage}> Add message</button>
        <ul>
        <li></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/76.0.3809.132 Safari/537.36.

Link to the challenge:

2

m still directly refers to the messages state, so you’re directly mutating the state by pushing to m. Make a copy of the array first:

var m = [...this.state.messages]
3

it worked. Thanks a lot