Synchronize React UI and State with Controlled Components

Share this video with your friends

Send Tweet

We’ll make the input field a “controlled component” by reacting to each change of the input and capturing it in the component state. Following this model gives us assurance that the UI is always a representation of the current application state.

Janusz
Janusz
~ 7 years ago

@Andrew, why don't you use ES6's arrow function for handleInputChange, like:

handleInputChange = e => { this.setState({ currentTodo: e.target.value}) }

  • no binding needed. Is there any drawback of doing it this way?
BlockOperator
BlockOperator
~ 7 years ago
MilesWells
MilesWells
~ 7 years ago

@Andrew, why don't you use ES6's arrow function for handleInputChange, like:

handleInputChange = e => { this.setState({ currentTodo: e.target.value}) }

  • no binding needed. Is there any drawback of doing it this way?

The reason this works is because an arrow function's 'this' is automatically assigned to the context in which it is defined. You cannot rebind an arrow function's 'this' using .bind, .call, or .apply. You also need to pay attention to hoisting if you use arrow functions.

I like using ES6's class members and arrow functions because it's more concise, but I would like to know if I missed any drawbacks of using them.