Am I unable to use inline “if” with useEffect in a functional React component?

Question

I am currently trying to work with Okta's React SDK to build an application using React using TypeScript, and I've chosen to use functional components instead of class-based ones.

As such, I am having an issue with rendering part of my app's menu based on the authenticated state of the user. The documentation shows using useEffect() to get the authenticated status of the user then using useState() to store user information based on that status.

That seems quite logical in practice and a great idea, but when I try to use the following component:

import React, { useState, useEffect } from 'react';
import { Dropdown } from 'semantic-ui-react';
import { useOktaAuth } from '@okta/okta-react';

export const HeaderUserMenu = () => {

    // Okta Hook, State
    const { authState, oktaAuth } = useOktaAuth();
    const [ userInfo, setUserInfo ] = useState(null);

    // Get info when our state/etc update with this.
    useEffect(() => {
        if (!authState.isAuthenticated) {
            setUserInfo(null);
        } else {
            oktaAuth.token.getUserInfo()
                .then((info: any) => setUserInfo(info))
        }
    }, [authState, oktaAuth])

    return (
        { userInfo && 
            <Dropdown.Menu item text={userInfo.username}>
                <Dropdown.Item>Log Info</Dropdown.Item>
            </Dropdown.Menu>
        }
    )    

}

I receive two errors:

',' expected. - This is pointing to the use of the && operator to check userInfo (is it null or not?) for conditional rendering of this component.

Object is possibly 'null'. - This is pointing to the use of userInfo.username inside the conditionally rendered stuff. The whole point of the logic is to only render if userInfo isn't null, so at this point userInfo can't be null, right?

I'm not sure what I'm doing wrong here.

I get the feeling that it has something to do with useEffect , but I guess I could be wrong, I'm still sort of getting used to using hooks in React, and even though I've used useState before, I've never used effects until now.

Thanks in advance!

Answer 1

',' expected. - This is pointing to the use of the && operator to check userInfo (is it null or not?) for conditional rendering of this component.

The pattern:

 { userInfo &&

The position of the { in your code means "Start of object literal" and not "Insert value into JSX" because you haven't initialised the JSX with a < .

Don't wrap that expression in {}

---

Object is possibly 'null'. - This is pointing to the use of userInfo.username inside the conditionally rendered stuff. The whole point of the logic is to only render if userInfo isn't null, so at this point userInfo can't be null, right?

You're testing if userInfo.username has a true value.

The error is because userInfo itself might be null .

Trying to access (null).username will throw an exception.

Test if userInfo has a value before testing if it has a username property.

Answer 2

I was able to get around this issue by declaring an interface for the userInfo that would be store in component state.

I also have to check for !authState at the beginning of useEffect.

After doing this, I replaced null with an empty object, and now I'm just checking if the object is empty or not via Object.keys(userInfo).length) .

It seems to be working fine and there are no errors being reported.