state values are lately updated - React JS - reactjs

Question

In my code, I'm trying to set a value to the particular state variables using event method in REACT JS. and also make some calculation for a Discounted price.
After Calculation, set the updated value to the state. But it should be updated lately whenever the next event occurs.
this.state = {
isAddVariant: false,
vendors: [],
variant_price: '',
variant_priceDiscount: '',
variant_priceDiscounted: '',
variant_unit: '',
variants: [],
}
onVariantType = (e) => {
this.setState({
[e.target.name]: e.target.value,
})
if (e.target.name === 'variant_price' || e.target.name === 'variant_priceDiscount') {
let variant_priceDiscounted = this.state.variant_priceDiscount !== '' ? (this.state.variant_price - (this.state.variant_price * (this.state.variant_priceDiscount / 100))).toFixed(2) : this.state.variant_price
this.setState({ variant_priceDiscounted })
}
}
// render function
<Typography variant="h7" color="inherit" style={{ marginTop: 20 }}>
Add Product Variants
</Typography>
<Grid container spacing={24}>
{/* Input - Price */}
<Grid item xs={2}>
<TextField
type={'number'}
name={'variant_price'}
value={nullToEmptyString(variant_price)}
onChange={this.onVariantType}
label={'Price'}
placeholder={'Enter price in ₹'}
required={true}
margin={'dense'}
autoComplete={'off'}
fullWidth
/>
</Grid>
{/* Input - Unit */}
<Grid item xs={2}>
<TextField
name={'variant_unit'}
value={nullToEmptyString(variant_unit)}
onChange={this.onVariantType}
label={'Unit'}
placeholder={'Enter unit (eg: kg)'}
required={true}
margin={'dense'}
autoComplete={'off'}
fullWidth
/>
</Grid>
{/* Input - Discount */}
<Grid item xs={2}>
<TextField
type={'number'}
name={'variant_priceDiscount'}
value={nullToEmptyString(variant_priceDiscount)}
onChange={this.onVariantType}
label={'Discount'}
placeholder={'Enter discount in %'}
margin={'dense'}
autoComplete={'off'}
fullWidth
/>
</Grid>
<Grid item xs={4}>
<TextField
type={'number'}
name={'variant_priceDiscounted'}
value={nullToEmptyString(variant_priceDiscounted)}
label={'Discounted Price'}
margin={'dense'}
autoComplete={'off'}
disabled
fullWidth
/>
</Grid>
<Grid item xs={2}>
{/* Button - Add */}
<IconButton
type={'add'}
aria-label={'Add'}
color={'primary'}
onClick={this.onAddVariant}
>
<IconCheck />
</IconButton>
</Grid>
</Grid>
Expected behavior was Updated Discounted Value is calculated and displayed immediately.
Actual behaviour was the value lately updated Actual behavior image:

Answer 1

setState is async, and take time to update the state. setState takes a callback, you can use it,
onVariantType = (e) => {
let name = e.target.name; //store the name in a variable to use in callback
this.setState({
[e.target.name]: e.target.value,
}, () => {
if (name === 'variant_price' || name === 'variant_priceDiscount') {
let variant_priceDiscounted = this.state.variant_priceDiscount !== '' ? (this.state.variant_price - (this.state.variant_price * (this.state.variant_priceDiscount / 100))).toFixed(2) : this.state.variant_price
this.setState({ variant_priceDiscounted })
}
})
}
Note: We stored e.target.name in a name variable, because after seState execute's e gets nullifies. Read more about Synthetic events.