ReactJS: setState() value is rendering in console.log but not updating in state

Question

Here I am getting small issue with setState() . I know this setState() is an asynchronous function. I have gone some example from SO example as well and I am getting my value in console.log() but this same is not updating in state.

What should I need to change here to get the updated state() value. Any suggestion for me please.

Here in my code on tab change the state value should be updated for form submission.

//Code

handleOnSubmitJoinUS(e) {
    e.preventDefault();
    const { name,  phone, email, comment, activeTab } = this.state;

    if (activeTab == 0 ) {

        this.setState({comment: "Message for : Becoming a team member"}, () => {
            console.log(this.state.comment);
        });

    } else if (activeTab == 1) {
        this.setState({comment: "Message for : Becoming a Vendor Partner"}, () => {
            console.log(this.state.comment);
        });

    } else {
        this.setState({comment: "Message for : Becoming a Designer Associates"}, () => {
            console.log(this.state.comment);
        });
    }
    
    
    const sendingMsgData = {
        name,  phone, email, comment
    }

    //attempt to login
    if (sendingMsgData.email && sendingMsgData.name && sendingMsgData.phone  != null  ) {
        this.setState({msg : "Thank you! we recieved your submission successfully, we will surely contact you within 24 hours"});
        window.setTimeout(function(){window.location.reload()}, 1000);
    } 
    this.props.sendingConsultation(sendingMsgData);
    
}

Answer 1

As you said, setState is asynchronous, so the rest of the function continues running, doing all that message sending and so on before the state is actually set in this.state. For your original code, that'd mean the rest of the code should be in that post-setState callback.

However, it doesn't look like comment needs to be in the state at all, since you're deriving it from state.activeTab:

handleOnSubmitJoinUS(e) {
  e.preventDefault();
  const { name, phone, email, activeTab } = this.state;
  let comment;

  if (activeTab == 0) {
    comment = "Message for : Becoming a team member";
  } else if (activeTab == 1) {
    comment = "Message for : Becoming a Vendor Partner";
  } else {
    comment = "Message for : Becoming a Designer Associates";
  }

  const sendingMsgData = {
    name,
    phone,
    email,
    comment,
  };

  //attempt to login
  if (sendingMsgData.email && sendingMsgData.name && sendingMsgData.phone != null) {
    this.setState({ msg: "Thank you! we recieved your submission successfully, we will surely contact you within 24 hours" });
    window.setTimeout(function () {
      window.location.reload();
    }, 1000);
  }
  this.props.sendingConsultation(sendingMsgData);
}

If you do really need it in state for some reason, you can do a this.setState({comment}) at the end.