Create a Controlled Input. Can someone please explain why it doesn't work this way

We were told to update the state this way in previous challenges
I wonder why it doesn’t work here and only works when we update the state directly. See my comments below When do we update directly and when do we update using the function way.

As per my understanding, this function way of updating gives us the most recent state value right?

I have solved the challenge but I just want to understand why it doesn’t work this way with the hope that i will understand this way better and when to use it too,

My solution
 **Your code so far**

class ControlledInput extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: ''
  };
  // Change code below this line
  this.handleChange = this.handleChange.bind(this);
  // Change code above this line
}
// Change code below this line
//___________________________
//the problem is here state=>
handleChange(event) {
  this.setState(state => ({
    input: event.target.value
  }));
}
//my question is Why
//______________________________
// Change code above this line
render() {
  return (
    <div>
      { /* Change code below this line
       */}
    <input value={this.state.input} onChange={this.handleChange} />
      { /* Change code above this line */}
      
      <h4>Controlled Input:</h4>
      <p>{this.state.input}</p>
    </div>
  );
}
};
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.101 Safari/537.36 OPR/77.0.4054.90

Challenge: Create a Controlled Input

Link to the challenge:

Hi @ankurchaulagain !

I am sure one of the pros can explain it in a more clean concise way than I can.
But I’ll try my best. :grinning:

Are you talking when do you have to use a function inside setState like this?

If so, there are times where you need a guarantee that you are working with the current value of state before you update it.

In the toggle challenge earlier, we needed a guarantee of the current value for visibility.
Reason being is because we had this condition here

 if (state.visibility === true) {
         return { visibility: false };
       } else {
         return { visibility: true };
}

It is important that we know we are working with the current value of state so we know when to toggle visibility between true and false.

Remember that the lesson explains that there can be multiple setState calls happening during a single update.

Using that function guarantees us that we are working with the current value of state before we update it.

But in your current challenge, why do we need a guarantee of the current value in state? We don’t need to use the function inside setState.
All we are doing is updating state whenever the input value changes.

Hope all of that makes sense!

1 Like

Yeah, that was a pretty good explanation.

I would just add that my (slightly) informed judgement is that I use the functional form if the new state if based on the old state or if there is a chance that a bunch of non idempotent calls to setState may be fired off in rapid succession.

If it’s just a simple setting of state to a fixed value and/or there is no chance they might fire it off in rapid succession, I just use the object.

If you’re not sure, the safest bet is the functional kind. But you will see a lot of people doing it both ways.

2 Likes

Thank you guys.

I was also interested in knowing/curious why I couldn’t type anything when I am using functional one in this challenge. Like I was trying to traverse through the code but couldn’t exactly figure out why.

In the beginning we have this.state set to the current state which in the beginning is an empty string when we type something we set the typed thing to current state at the same time we pass it to handlechange method. It should take the current state and set the input value in the state to whatever we passed in right? So it looks like it should work.

But we don’t get anything when we type something in the input box and instead we get a error that says to check the console. I couldn’t figure out why it was not working.

And like I said I’m just curious and hoped that I could learn something new if we could identify the source of our error. But don’t really insist on knowing/will be alright and move on to next lesson(breathe) with what I know so far, as I have found it the hard way how difficult/painful it could get trying to understand “everything” in react. :upside_down_face:

I am not sure I understand what you mean by functional one.

Were you trying to rewrite it as a functional component instead of a class based one?

If so, I think the FCC tests only work for class components here.

1 Like

I think what you are asking is why the event.target.value is not working inside the setState updater function?

1 Like

What I meant was why I could not update the state using functions. That is if I used function to update the state it doesn’t work here. It only works here if I update state directly. I think it’s because of FCC using older version of react like the next answer says.

I should have linked to this post instead as it gives a bit more info.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.