handleChange() function causing crash for some reason

[Based1776]

I don’t understand why my handleChange() function isn’t working. As soon as I start typing anything into the input text box, my whole application crashes. My submitMessage() function uses the same syntax, but it seems to work fine. I’ve tried re-writing my function as to simply pass an object to setState instead of a function, and that works fine. However, I want to know what exactly is wrong with my implementation here. I would appreciate any advice. Thank you!

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);
}

handleChange(event){
  this.setState((state,props)=>{
    return {
      input: event.target.value,
      messages: state.messages
    }
  });
}

submitMessage(){
  this.setState((state,props)=>{
    return {
      input: '',
      messages: [...state.messages,state.input]
    }
  });
}

render() {
  let temp=this.state.messages.map(
    (i) => {
      return <li key={i}>{i}</li>
    }
  )
  return (
    <div>
      <h2>Type in a new Message:</h2>
      <input onChange={this.handleChange} value={this.state.input}/>
      <button onClick={this.submitMessage}>Click</button>
      <ul>
      {temp}
      </ul>
    </div>
  );
}
};

  **Your browser information:**

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

Challenge: Manage State Locally First

Link to the challenge:

freeCodeCamp.org

[lasjorg]

1. Because of the updater function for the handleChange. You can read more about it in the post below.

setState and event.target

My React app don't work

You are not using the current state for the state update. This means the updater function is not needed and you should just be using an object. handleChange(event) { this.setState({ input: event.target.value }) } Next. The fCC React curriculum is using React v16.4.0 and because of how React 16 events work (pooling) the event target will be undefined inside the setState updater function. This is why it crashes when you type into the input Uncaught TypeError: Cannot read propert…

2. state.messages now has to be using this (without the updater function)

[Based1776]

That was helpful – thank you for the reply. If I understood correctly, the lesson to be learned here is to avoid using updater functions with setState, and to instead pass it an object directly?

[lasjorg]

Yes, at least with the version of React that the challenges are using. It would have worked with React 17 and up.

Edit: If you do need an updater function in React 16 you can use one of the methods explained in the thread I linked to.

One option is to use event.persist() or save the value at the top of the handler function (only when an updater function is needed).