JSX complicated comparison?

Question

JavaScript

I want to render some things on the page depending on the user's role. The user role lies in the local store, and is issued by the server. In order to understand what role the user has. I take the data from the local story with the isAuthenticated function, and based on the ternary expression in jsx I try to render. But with such a complex comparison, it either does not render anything at all. Or, render everything as is. Below are 2 examples, expressions through && and through | |.
When I use && it turns everything to false and doesn't render a damn thing.
When I use | | it turns everything into true.
I do not understand what the problem is?

export const isAuthenticated = () => {
    if (typeof window == "undefined") {
        return false
    }
    if (localStorage.getItem("jwt")) {
        return JSON.parse(localStorage.getItem("jwt"))
    } else {
        return false
    }
}

There is such code, the isAuthenticated function exactly returns what is needed.
However, I have a similar code. And it works, but there is a ternary expression with one comparison.

{isAuthenticated().direct.role === "Директор" ? (
                    <Button
                      type="danger"
                      onClick={userId => this.handleClick(user._id, userId)}
                    >
                      Удалить Пользователя
                    </Button>
                    ):("")}

Answer 1

const userRole = isAuthenticated().direct.role;

['Директор', 'Управляющий' , 'role name'].includes(userRole) ? ...code... : ...code... ;

True, you still have problems. The most obvious one is that this code crashes if the user is not authorized and isAuthenticated returns false, and you are trying to get the direct property from this value.

Answer 2

isAuthenticated().direct.role === 'Director' || isAuthenticated().direct.role === 'Manager' ... then, I think you can guess for yourself

Answer 3

You must check the result of the function execution each time, or take this result into a variable. That is, you expect it to run like this:

{isAuthenticated().direct.role === "Директор" || isAuthenticated().direct.role === "Управляющий" || isAuthenticated().direct.role === "Бухгалтер" ? (
                    <Button
                      type="danger"
                      onClick={userId => this.handleClick(user._id, userId)}
                    >
                      Удалить Пользователя
                    </Button>
                    ):("")}

But in fact, you are only doing the first comparison, and then there is just a check for a string, and so on. it is not empty, you always get true
And JSX is not in the business here, this is a question for understanding JavaScript
And yet, render not an empty string in case of false, but null

Answer 4

The code with pictures is of course strong, neither to copy to correct, nor to indicate where the error is.

Answer 5

Do you understand that you are comparing only one role? will always be true. isAuthenticated().direct.role === "Директор"
"Бухгалтер" ? (<Sub>)...