React - event handler and set.State(state => {})

JavaScript
1

Hello!

Was doing React and Redux - Manage State Locally First and got stuck in something before figuring out what was wrong.
But the thing is that I don’t know why it’s wrong.

To sum up, we need to create a React Component with Controlled Input; got this:

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

  handleChange(event) {
    // #1 - CALLING CALLBACK
    this.setState(state => ({
      input: event.target.value
    }));
    console.log(this.state);

    // #2 - NOT CALLING CALLBACK
    this.setState({
      input: event.target.value
    });
    console.log(this.state);
  };

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input onChange={this.handleChange} value={this.state.input}/>
        <button onClick={this.submitMessage}>Submit</button>
      </div>
    );
  }
};

So, in the handleChange(event) {}:
I tried calling a callback with state as parameter.

    // #1 - CALLING CALLBACK
    this.setState(state => ({
      input: event.target.value
    }));
    console.log(this.state);

But it throws error.

VirtualBox_Xubuntu_20_12_2024_11_45_43
VirtualBox_Xubuntu_20_12_2024_11_45_43462×337 29.2 KB

The problem doesn’t happen when I change event.target.value, inside the callback, for a value.
So, my question is:

  1. Is it really the problem? Calling event.target.value inside the callback for the setState() method?
  2. If it is, why is that?

Also, the problem doesn’t happen when I don’t use the callback.

2

Could you give some more info, what is for and how are you running it, in other words what do I need to do to check the code?

1 Like
3

Hi there!

That is not defined with this keyword.

1 Like
4

Hi!
You can copy and past the whole code in FCC editor, erasing everything is previously there:
can be in this lesson

Then, inside handleChange(event), try commenting one of the bellow and try to write something in the rendered input.

    // #1 - CALLING CALLBACK
    this.setState(state => ({
      input: event.target.value
    }));
    console.log(this.state);

    // #2 - NOT CALLING CALLBACK
    this.setState({
      input: event.target.value
    });
    console.log(this.state);

The first one throws an error. The second doesn’t.
I thought that the first one would work as well, but it doesn’t.
But if I change event.target.value inside the this.setState(state => {}) for a string or number than it works just fine.

So I wondering if there is a problem in using event.target.value. And if there is, why would that be.

1 Like
5

Hello!

So, I tried the following:

 // #1 - CALLING CALLBACK
    this.setState(state => ({
      input: this.event.target.value
    }));
    console.log(this.state);

It didn’t work as well.

First, not sure if that is what you suggested - if it isn’t please, could you point the correct place to define this?

Second, this isn’t to reference object or method to the object itself?
Event, in this case, would become part of it?
Am I getting event and this concepts wrong?

6

Please include the challenge link when asking for help.

As for your question

2 Likes
7

Hi @marcosC

Here is a comparison of the original code and your code.

The code in blue is the original code, the code in red is your code.
The code in magenta is the overlap.

image
image613×583 34.3 KB

You need to include the submitMessage() method.

Please reset the step, as you removed some of the comments.
I think the tests check for those.

Happy coding

1 Like
8

You are right of course that they didn’t complete the challenge. But I think they are specifically asking why the event doesn’t work inside the state updater function, which is for technical reasons explained in the thread I linked to.

1 Like
9

Yeah!
That’s exactly the answer to my question!
I could solve this challenge, just didn’t know why one thing worked and not the other.

So it really is something that caused problem before.
Thanks a lot, including the links to the docs and other sources.

Will follow the advice of not using updater function when there is no need of previous data.
Also the warning about including challenge link.

Appreciate the help of everybody that took their time to help!

1 Like