I think i have did something right, can someone explain why the last checklist is not checked?

JavaScript
1

image
Tell us what’s happening:

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);
  }
  handleChange(e){
    this.setState({
      input : e.target.value
    })
  }
  submitMessage(e){
    let inputState  = this.state.input;
    let messages    = this.state.messages;
    messages.push(inputState);
    this.setState({
      messages  : messages,
      input     : ''
    })
    console.log(messages)
  }
  render() {
    let li  = this.state.messages.map(function(el, index){
      return <li>{el}</li>
    })
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input value={this.state.input} onChange={this.handleChange} placeholder='Type Here' />

        <button onClick={this.submitMessage}>
          Add Message
        </button>
        <ul>
          {li}
        </ul>
      </div>
    );
  }
};

Your browser information:

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

Link to the challenge:

2

Hey!

In your event handler:

submitMessage(e){
    let inputState  = this.state.input;
    let messages    = this.state.messages;
    messages.push(inputState);
    this.setState({
      messages  : messages,
      input     : ''
    })
    console.log(messages)
  }

The line messages.push(inputState); mutates the state object and, as stated in the docs, you shouldn’t do that

state is a reference to the component state at the time the change is being applied. It should not be directly mutated. Instead, changes should be represented by building a new object based on the input from state and props .