Works just fine, but still doesn't get accepted

JavaScript
#1

Proper functionality but still not getting accepted.

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(){
    let itemsArray = this.state.input.split(",");
    this.setState({
      input:'',
      messages:itemsArray
    });
  }
  render() {
    let items = this.state.messages.map((k) => <li>{k}</li>);
    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}></input>
        <button type="submit" onClick={this.submitMessage}>Add message</button>
        <ul>
        {items}
        </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/77.0.3865.90 Safari/537.36.

Link to the challenge:

#2

Hi @Abhishek-1Bhatt.
In your submitMessage() function, you are taking the current input and directly setting it to the state variable ‘messages’ array. You have to take the current input and append it to the ‘messages’ state variable.

1 Like
#3

Thanks @iamraga it works!
Is it because of asynchronous actions?

#4