Pls Help Manage State Locally First

Tell us what’s happening:
Cannot for the life of me figure out what’s wrong with this. Any help would be very appreciated!

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(e){
    this.setState({input : e.target.value});
  }

  submitMessage() {
      this.setState({
        input: '',
        messages: this.state.messages.concat(this.state.input)
      });}

  render(){
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input onChange={this.handleChange} value={this.state.input}/>
        <button onClick={this.sumbitMessage}>Add Message</button>
        <ul>
          {this.state.messages.map(message => <li>{message}</li>)}
        </ul>
      </div>
    );
  }
};


Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

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

You have a typo in your onClick handler below:

<button onClick={this.sumbitMessage}>Add Message</button>

I’m confused…I copied and pasted what you have in your message and are still having the same problem. I also checked the actual function handler and don’t see anything

That was the line that was wrong, if you’ve copied that, you’re just pasting exactly the same thing in without fixing the spelling mistake.

ah I feel so stupid now! Thank you so much!!

Thank you for the help!!

:grinning: easy fix though

1 Like