Drupal - How to add multiple form fields with a single button click (No Coding Required)
Introduction Drupal is an awesome CMS. Drupal content type form, allows you to…
June 28, 2020
setState() method in ReactJS class components is asynchronous in nature. Lets understand this with the help of an example.
Example: Lets create a counter field and have two Plus and Minus buttons for incrementing and decrementing count. And, we will maintain counter in component’s state.
import React, { Component } from 'react'
class MyApp extends Component {
state = {
counter: 0
}
minusHandle = () => {
console.log('minus debug 1', this.state.counter);
this.setState({counter: this.state.counter - 1});
this.setState({counter: this.state.counter - 1});
console.log('minus debug 2', this.state.counter);
}
plusHandle = () => {
console.log('plus debug 1', this.state.counter);
this.setState({counter: this.state.counter + 1});
this.setState({counter: this.state.counter + 1});
console.log('plus debug 2', this.state.counter);
}
render() {
return (
<React.Fragment>
<button type="button" onClick={this.minusHandle}>
Minus
</button>
count : {this.state.counter}
<button type="button" onClick={this.plusHandle}>
Plus
</button>
</React.Fragment>
)
}
}
class App extends Component {
render() {
return <React.Fragment>
<MyApp />
</React.Fragment>
}
}
export default App;
Lets have a look at the output:
# web
[Minus] Count: 0 [Plus]
# click on [Plus] button
## web
[Minus] Count: 1 [Plus]
## Console log
plus debug 1 0
plus debug 2 0
# click on [Plus] button
## web
[Minus] Count: 2 [Plus]
## Console log
plus debug 1 1
plus debug 2 1
If you notice, both console.log statements prints count: 0, as they executed before setState() executed. Since, setStaate is asynchronous. Also we are calling setState() twice. Even then, counter is increased by 1 only. Because both setState() calls are aware of one state only at the time of start.
Similarly if I click on Minus button, same kind of behavior will happen. So, the important thing to note is that you can not rely on setState() for calculating next state.
setState() has another variant, which accepts a function. It receives previous state and current props as argument. See complete example. I have modified only plusHandle()
import React, { Component } from 'react'
class MyApp extends Component {
state = {
counter: 0
}
minusHandle = () => {
console.log('minus debug 1', this.state.counter);
this.setState({counter: this.state.counter - 1});
this.setState({counter: this.state.counter - 1});
console.log('minus debug 2', this.state.counter);
}
plusHandle = () => {
console.log('plus debug 1', this.state.counter);
this.setState(
(state, props) => {
return { counter: state.counter + 1 };
}
);
this.setState(
(state, props) => {
return { counter: state.counter + 1 };
}
);
console.log('plus debug 2', this.state.counter);
}
render() {
return (
<React.Fragment>
<button type="button" onClick={this.minusHandle}>
Minus
</button>
count : {this.state.counter}
<button type="button" onClick={this.plusHandle}>
Plus
</button>
</React.Fragment>
)
}
}
class App extends Component {
render() {
return <React.Fragment>
<MyApp />
</React.Fragment>
}
}
export default App;
Lets take a look at the output, when I click on Plus button
# initial web view
[Minus] Count: 0 [Plus]
# click on [Plus] button
## web
[Minus] Count: 2 [Plus]
## console
plug debug 1 0
plug debug 2 0
# click again on [Plus] button
## web
[Minus] Count: 4 [Plus]
## console
plug debug 1 2
plug debug 2 2
Notice the magic. State is updated as many times you have called setState(). But, the behavior of setState() is still asynchronous, i.e. debug statements executed before setState()
Introduction Drupal is an awesome CMS. Drupal content type form, allows you to…
Introduction In this guide, We will get basic understanding of various options…
Introduction I had to create many repositories in an Github organization. I…
Introduction In this tutorial we will see: How to instantiate different classes…
This is regarding the timeit implementation in python. The basic requirement…
This post is dedicated for cases where we intend to append a variable value in a…
Introduction Strapi is a backend system provides basic crud operations with…
Introduction I had to create many repositories in an Github organization. I…
Introduction I was trying to download some youtube videos for my kids. As I have…
Introduction In this post, we will explore some useful command line options for…
Introduction In this post, we will see how we can apply a patch to Python and…
Introduction We will introduce a Package Manager for Windows: . In automations…