Manage State Locally First - code does what is expected but still not pass test

Tell us what’s happening:
When I do ‘run the tests’, I get the following error. I validated the code and it does add messages to the array and render the array content on the screen (via a list). I m not sure what the error is referring to. Any ideas?

‘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) {
    this.state = {
      input: '',
      messages: []
  // add handleChange() and submitMessage() methods here
  handleChange(event) {
    console.log('handleChange:' + this.state.input);

  submitMessage(event) {
    console.log('submitMessage:' + this.state.messages);

    this.setState( {
      input: '',
      messages: this.state.messages
    } );

  render() {
    let messagesHtml = e=><li>{e}</li> );

    return (
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }

      <input type='text' onChange={this.handleChange} value={this.state.input}></input>
      <button onClick={this.submitMessage}>Add message</button>
        { /* change code above this line */ }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0.

Link to the challenge:

It is working, but the tester does not like you mutating the state directly, it is bad practice anyway, always change the state of a component with this.setState({}), here is the statement that you are directly mutating the state with


there are several ways you can achieve what you are trying to do without directly mutating the state, google around or search this forum and see if you can figure it out.