Not able to access correct value of state variable inside function in React

I have created a form in React which has a button that should redirect to the next form after validating the input data. The button looks like this:

<Button type = "submit" onClick = {(event) => {validateData(event,"basicInfo")}} className = "button" variant="contained" color="secondary" style = {buttonStyle}>Validate Data</Button>

validateData function is as follows:

var validateData = (event,section) => {
    props.handleSubmit(event,section);
    console.log(props.errors); //Added to debug

    //Following is the code I actually want to execute
    /*if( !props.errors.firstName && !props.errors.lastName && !props.errors.email && 
         !props.errors.address){
     history.push("/resume-gen/education");
    } */
  }

handleSubmit function called inside validateData has the validation logic and it updates a state variable errors upon validation.

The issue here is that props.errors is not shown as updated as logged by console.log() used inside validateData function. The result of console.log is:

{firstName: "", lastName: "", email: "", address: "", educationInfos: Array(1), …}

whereas it should be

{firstName: "First Name is required.", lastName: "Last Name is required.", email: "Email is required.", address: "Address is required.", educationInfos: Array(1), …}

which is logged on second click (but should happen on the first click itself)

Logging props.errors from anywhere else in the code gives the updated errors. So, the issue seems to be inside the function validateData. Also, props.errors properties (which are printed on the page) are correctly printed on first click of the button. I need to click the button again for the updated value of errors being logged from inside the function. I don’t understand what is going wrong inside the function. I have tried logging inside a callback function but to no avail.

Answer

From the given code, I can make out that the call to props.handleSubmit(event,section); updates your parent state which you’re passing as props to this component.

The state update will cause a re-render of your parent which means that your Button element will be re-rendered also and only then you will get the updated props.

What you’re essentially logging is the value of props.errors that is available in the current render. You cannot get the latest value because validateData is closing over the value of props from current render.

On new render validateData will be created again and close over the value of updated props.

Instead of depending on props.errors here, I guess you can first validate stuff (if possible) using event and section coming as arguments and then call props.handleSubmit(event,section); and history.push("/resume-gen/education"); code.

Note :- Logging props.errors from anywhere else must be working because you must be logging it inside the Button function body which on each re-render will have updated values unlike event-handlers which might cause the update but won’t contain the updated values since they close over the ones from previous re-render. Also if Button is a class component, then you must be seeing the correct value inside the render method.