Manage State Locally First: Test not passing

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.


Your code so far

class DisplayMessages extends React.Component {
  constructor(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) {

  submitMessage() {
      input: ''
  render() {
    const elems = {
      return <li>{a}</li>
    return (
        <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>
        { /* change code above this line */ }

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:

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?

Thanks for your help. :grinning:

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