Manage State Locally First: Test not passing

JavaScript
1

Tell us what’s happening:

Can someone please tell me why I’m not passing this challenge? It works perfectly. The error I’m getting is:

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

But when I click the Add messages button the input renders correctly.

Thanks!

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() {
    this.state.messages.push(this.state.input);
    this.setState({
      input: ''
    })
    console.log(this.state.messages)
  }
  render() {
    const elems = this.state.messages.map(function(a) {
      return <li>{a}</li>
    })
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <input value={this.state.input} onChange={this.handleChange}/>
        <button onClick = {this.submitMessage}>Add message</button>
        <ul>{elems}</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/74.0.3729.169 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react-and-redux/manage-state-locally-first

2

The submitMessage() method should concatenate the current message (stored in input ) to the messages array in local state,

What is the difference between concatenating to an array, and pushing a new element into an array?

3

Thanks for your help. :grinning:

this.state.messages = […this.state.messages, this.state.input]