I'm getting the Typescript warning: 'isAuthenticated' is assigned a value but never used for the component below

However, I am using isAuthenticated in my component as seen below.

import { useAuth0 } from '@auth0/auth0-react'

const Profile: React.FC = () => {
    const { user, isAuthenticated, isLoading } = useAuth0()

    if (isLoading) {
        return <div>Loading ...</div>
    }

    return (
        <>
            isAuthenticated && (
            <div>
                <img src={user?.picture} alt={user?.name} />
                <h2>{user?.name}</h2>
                <p>{user?.email}</p>
            </div>
            )
        </>
    )
}

export default Profile

Why am I receiving this warning when I've used the variable?

CodePudding user response：

You used Logical && Operator wrong. replace () with {}

more info : https://reactjs.org/docs/conditional-rendering.html

CodePudding user response：

This answer is merely one implementation of what has been shared in the 'Comments' above by user2740650.

Credit where credit is due.

import { useAuth0 } from '@auth0/auth0-react'

const Profile: React.FC = () => {
    const { user, isAuthenticated, isLoading } = useAuth0()

    if (isLoading) {
        return <div>Loading ...</div>
    }

    return (
        <React.fragment>
            {isAuthenticated && (
                <div>
                    <img src={user?.picture} alt={user?.name} />
                    <h2>{user?.name}</h2>
                    <p>{user?.email}</p>
                </div>
            )}
        </React.fragment>
    )
}

export default Profile

My hope is that this, above answer, may be helpful to some future jsN00b.