Can't get my head around this yet

Hi guys, you helped me before so I’m posting again. I can’t get my head around this issue yet, why is the state “one step behind” when updating what’s on the input?
Also I can’t tell why this doesn’t pass the last two tests…

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(this);
// Add handleChange() and submitMessage() methods here
handleChange(e) {
  messages: this.state.messages})

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

render() {
  return (
      <h2>Type in a new Message:</h2>
      { /* Render an input, button, and ul below this line */ }
        <input onChange={this.handleChange} value={this.state.input}/>
        <button onClick={this.submitMessage}> Submit</button>
        <ul>{,i) => <li key={i}>{m}</li>)}</ul>

      { /* 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/87.0.4280.88 Safari/537.36.

Challenge: Manage State Locally First

Link to the challenge:


Please use functional components… they are more efficient then class based…

Sorry that I could not help…

Kind Regards

Forgot to bind submitMessage() maybe?

I think I did that:
this.submitMessage = this.submitMessage(this);

this.submitMessage = this.submitMessage.bind(this);

1 Like

oh wow… how silly of me… okay, this should work…

Nice one glad it worked :slight_smile: