Manage-state-locally-first ; having trouble

JavaScript
1

Tell us what’s happening:

can’t figure out where i’m going wrong in this react-redux challenge.

Your code so far


class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  };
  // add handleChange() and submitMessage() methods here
this.handleChange=this.handleChange.bind(this);
this.submitMessage=this.submitMessage.bind(this);

handleChange(e){
  e.preventDefault();
  this.setState({input: e.target.value})
};



submitMessage(){
  let newMessages = [...this.state.messages, this.state.input];
  
this.setState({
     messages: newMessages,
     input: ''
   })
};



  render() {
    
    const items = this.state.messages.map(msg => <li>{msg}</li>)
    
    return (
      <div>
        <h2>Type in a new Message:</h2>
         
                                            
<input value={this.state.input} onChange={this.handleChange}/>
        <button onClick={this.submitMessage}>Submit Me!</button>
        <ul>{items}</ul>
          
      </div>
    );
  }
};

Your browser information:

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

Link to the challenge:

2

These lines should be inside the constructor method! :smile:

1 Like
3

I have a question why the following code is not passing the last test.

submitMessage(){
  const inputData =  this.state.input;
  
this.setState({
     messages: [...inputData],
     input: ''
   })
};

And can we do

messages: this.state.messages.concat(this.state.input)