mapStateToProps value lags behind getState() by a keystroke - reactjs

Question

I am using redux's connect() on App.js and then passing down a dispatcher to a child. The child also receives the state variable as a prop.
The issue is a log statement on the state variable through the prop mapping lags 1 digit behind what is entered. Here are 2 log statements showing this:
SelectDonation.js:19 getState value {donation_amount: "345"}
SelectDonation.js:20 mapstatetoprops value 34
Here is the child component SelectDonation.js:
handleInputChange = inputEvent => {
this.props.dispatch_set_donation_amount(inputEvent.target.value);
console.log("getState value", store.getState());
console.log("mapstatetoprops value", this.props.donation_amount)
};
render() {
return (
<React.Fragment>
<Form>
<input
type='number'
placeholder='Custom Amount'
name='donation_amount'
id='custom_amount'
onChange={(e) => this.handleInputChange(e)}
/>
<Button
primary
onClick={(event) => {
event.preventDefault();
this.props.dispatchChangeCheckoutStep(checkoutSteps.paymentDetails);
console.log(store.getState().checkoutStep)
}}>Next Step
</Button>
</Form>
</React.Fragment>
)
}
}
App.js:
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<Modal
trigger={<Button color='purple'>Donate</Button>}
size='small'
>
{this.props.checkoutStep === checkoutSteps.selectDonation &&
<SelectDonation
dispatch_set_donation_amount = {this.props.dispatch_set_donation_amount}
dispatchChangeCheckoutStep={this.props.dispatchChangeCheckoutStep}
{...this.props} // passes down all the state
/>
}
{this.props.checkoutStep === checkoutSteps.paymentDetails && <PaymentDetails
redux_donation_amount={this.props.redux_donation_amount}
{...this.props}
/>
}
{this.props.checkoutStep === checkoutSteps.referrals && <Referrals dispatchUpdateStateData={this.props.dispatchUpdateStateData} />}
</Modal>
</header>
</div>
);
}
}
const map_state_to_props = (state) => {
return {
log_prop : state.log_to_console,
donation_amount : state.donation_amount,
checkoutStep : state.checkoutStep,
}
};
const map_dispatch_to_props = (dispatch, own_props) => {
return {
dispatch_set_donation_amount : amount => dispatch(set_donation_amount(amount)),
dispatchChangeCheckoutStep : newStep => dispatch(changeCheckoutStep(newStep)),
dispatchUpdateStateData : (stateData, stateVariable) => (dispatch(updateStateData(stateData, stateVariable)))
}
};
//connecting redux
export const AppWrapped = connect(map_state_to_props, map_dispatch_to_props)(App);
It looks correct to me but obviously I am neglecting something. What is causing the mapStateToProps variable to be one keystroke behind persistently?

Answer 1

The component has not updated yet. You have called an action to be dispatched to your reducer, but not waited for the component to receive the new props. You can see this by either pushing the second log into a setTimeout (not recommended)
this.props.dispatch_set_donation_amount(inputEvent.target.value);
console.log("getState value", store.getState());
setTimeout(() => console.log("mapstatetoprops value", this.props.donation_amount));
or by using a middleware such as thunk and returning a Promise from your action creator.
this.props.dispatch_set_donation_amount(inputEvent.target.value).then(x => console.log("mapstatetoprops value", x));
console.log("getState value", store.getState());

Answer 2

Because React has not had a chance to update the component. Your own code is still executing, so the rest of the component lifecycle has not executed yet, and therefore your component still has its existing props.
Also, please don't access the store directly in your components. One of the main purposes of connect is to handle that for you.