Why is my information passed lagging behind by one? - reactjs

Question

I am trying to code a simple React app that requires a user to sign in with Google before sample data can be accessed in the app. I would like a welcome message to display upon login that says "Welcome, [name]!" Currently, this function is working, but it's lagging behind by one sign-in.
The beginning state of my app
This is how the app appears at the beginning.
The app after one login
This is how the app appears after one login. Note that instead of getting the name from the user's Google account, it displays the default value of "default".
The app after two or more logins to the same account
After logging out and logging back in again, however, the app functions normally, showing the welcome message with the user's name. I've tried logging in with a different account, and the lag persists, i.e. "default" displays when logging in with Naomi, "Naomi" displays when logging in with Ally, "Ally" displays after logging out and logging back into Ally.
I've tried logging the variable with the user's name (userName) to the console right before information is passed, and it appears to be firing AFTER the log-in is completed, but I'm not sure why.
The code I hope is relevant is below.
import React from 'react';
import Login from './Login';
var userName = "default";
class LoginButton extends React.Component {
// some other code here
onSignIn = googleUser => {
this.toggleLoggedIn();
let user = googleUser.getBasicProfile();
let id_token = googleUser.getAuthResponse().id_token;
userName = user.getName(); //I try to grab the name from the user's account and assign it to userName
console.log('google user obj', user);
{/*console.log('google_id_token', id_token);*/}
console.log('Name:', userName); //This properly logs the correct userName to the console
};
// some other code here
render() {
console.log(this.state.isLoggedIn);
console.log(userName); //this incorrectly logs the userName lagged by one
// noinspection CheckTagEmptyBody
return (
<div>
<Login isLoggedIn={this.state.isLoggedIn} name={userName}/> //this passes the incorrect userName
<div id="my-signin2"></div>
<br />
{this.state.isLoggedIn && (
<button style={{ width: 200, height: 40, textAlign: 'center' }} onClick={this.logout}>
Logout
</button>
)}
</div>
);
}
}
Any help would be much appreciated.

Answer 1

My problem was the placement of this.toggleLoggedIn();
Moving it to the end of the onSignIn function block solved my problem.
onSignIn = googleUser => {
console.log("Sign in successful");
let user = googleUser.getBasicProfile();
userName = user.getName();
this.toggleLoggedIn();
};