Create a Controlled Input - event.target undefined

JavaScript
#1

Stuck on React Challenge: React: Create a Controlled Input

the target property of the event argument in handleChange(event) is ‘undefined’, I have no idea why. Please help

My code so far


class ControlledInput extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: 'a'
  };
  // change code below this line
  this.handleChange = this.handleChange.bind(this);
  // change code above this line
}
// change code below this line 
handleChange(event) {
  this.setState(state => ({
    input: event.target.value
  }));
}

// 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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36.

Challenge: Create a Controlled Input

Link to the challenge:

#2

setState is asynchronous. The event parameter here is a Synthetic
Event and is pooled. The link provided shows a way to make it work, but also, you can simply define a new variable and assign it event.target.value and assign it as input's value. This way, you are capturing the current value of event.target.value and assigning it. The way you have it written now, when the state is updated, the event is no longer relevant.

Note: The other approach is to use the non-functional version of setState. This is fine, since the value of input does not depend on a previous state property’s value.

#3

You don’t have to passed callback function inside setState. Just write the object you want to change inside setState will do.

this.setState({hello: 'hello world'})
#4

I was confused by this lesson as well. I had passed the same parameter to the setState function as shown above. The reason is that in this lesson:
https://www.freecodecamp.org/learn/front-end-libraries/react/use-state-to-toggle-an-element
it instructed us to set up the setState parameter that way.

I continued that pattern in this lesson:
https://www.freecodecamp.org/learn/front-end-libraries/react/write-a-simple-counter
here is my setState function which worked find in that lesson:
this.setState(state =>({count: 0}));

Can you explain why that works there but this doesn’t work in this lesson?
this.setState(state => ({input: event.target.value}));
this line does work:
this.setState({input: event.target.value});

on another note… even though the first function call doesn’t work it still passes when you click “Run the Tests” :-p

Thanks so much. It would be helpful to know. :slight_smile:

#5

You can read the docs for better explanation here:

#6

Anytime we pretend to use an event to update state, is better to previously store it in a variable. Example:

let updateStateWithEvent = e.target.value
setState(s=>({value: s.value+updateStateWithEvent}))

or e.target.value dies before being useful

For this particular exercise:

  handleChange(e){ 
    let storeMe = e.target.value    
    this.setState(s=>({input:storeMe}))
  }

Though here we’re not really updating anything and this should be enough

  handleChange(e){     
    this.setState({input:e.target.value})
  }
#7