Bug: UserContext Provider not loading fast enough to allow components to render with data provided to them in Dashboard (Event Types)

[singhmi4]

I'm getting stuck on getting the data from UserProvider.context to display user data on the dashboard because it's giving me a similar undefined error I got on the New Events page. The difference here is that the page expects to load the data right away as opposed to having to click a button to retrieve the data as in the New Events page.

Error Message:

TypeError: userData.user is undefined
EventTypes
src/pages/dashboard/EventTypes.js:53

  50 | </Grid>
  51 | <Grid container direction="column" item xs={11}>
  52 |   <Grid item>
> 53 |     <Typography>{userData.user.firstName} {userData.user.lastName}</Typography>
     | ^  54 |   </Grid>
  55 |   <Grid item>
  56 |     <Typography color="primary">calendly.com/{userData.user.firstName.toLowerCase()}-{userData.user.lastName.toLowerCase()}</Typography>

Is there a react method that waits for context data to load before rendering the components from using it? I tried using a ternary operation below to check if undefined:

<Typography>{typeof userData === undefined ? "Loading" : userData.user.firstName} {typeof userData === undefined ? "Loading" : userData.user.lastName}</Typography>

but that isn't making the error go away. I tried looking on stack overflow, but not finding anything that can help at the moment.

[bonnieli]

Hey @singhmi4 hmmm I wish user wasn't embedded in userData so that it would be easier to identify if the user is already loaded. I guess regardless what you can do on that page is to wrap it around a logic that guarentees that user is not undefined before it loads for example

{userData.user && (
  <Grid item>
    <Typography>{userData.user.firstName} {userData.user.lastName}</Typography>
  ...
)}

[singhmi4]

hi @bonnieli that Inline If with Logical && Operator got it to work, thanks!

As for your suggestion about not having user embedded into the userData object, that's because in the UserProvider context file, I have setUser({ authenticated: true, user: responseJson.user }) which is what gets set after the successful authentication process from the back-end.