Manage State Locally First --help

Tell us what’s happening:

It’s saying this.state is not a function

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() {
    this.setState = ({
      input: '',
      messages: [...this.state.messages, this.state.input]
  render() {
    return (
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <input type='text' onChange={this.handleChange} value={this.state.input} />
        <button onClick={this.submitMessage}> Add Message </button>
         { => <li>message</li>)}

        { /* change code above this line */ }

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36.

Link to the challenge:

are you sure that’s what it’s saying? That’s actually not the message I get when I run your code. this.state may not be a function, but this.setState should be.

One possible reason why this.setState may not be a function (and your error message is saying that this.setState is not a function), is because of the nature of this. To test, you may want to console.log(this) just before either of your this.setState calls, simply to show yourself if the current context is what you think it is.

EDIT: I’ll give you a hint – do you see a difference between the this.setState in handleChange(), which works fine, and the one in submitMessage(), which is the one that doesn’t?

1 Like

Thank you so much! I was already stressed out the time I was doing it.