How To Setup Multiple Conditionals Within React JSX?

Question

I am trying to do something similar to if elseif else statement in React.

Here is what I have currently, with just simple true or false conditional, and works fine

{isAdmin()  ? (
  <>
    <a href="/profile">admin</a>  
    <div class='container'></div>
  </>         
) : (
  <>
    <a href="/profile">user</a>
    <div class='container'></div>
  </>
)}

but now I want to have multiple conditionals. Tried this below

isAdminTwo() and isAdminThree() are children of isAdmin(), which means that they all must meet isAdmin() condition first

{isAdmin()  ? (
  <>
  <a href="/profile">admin</a>  
  <div class='container'></div>
  </>         
) : (
  <>
  {isAdminTwo()  ? (
  <>
    <a href="/profile">admin2</a>  
    <div class='container'></div>
  </>         
) : (
  <>
  {isAdminThree()  ? (
  <>
    <a href="/profile">admin3</a>  
    <div class='container'></div>
  </>         
) : (
  <>
    <a href="/profile">user</a>
    <div class='container'></div>
  </>
)}

but getting errors

TypeError: ge(...) is not a function

What is a proper way to do this?

I haven't as i have only done it this way. I looked around and did not helpful enough sources to help with if else. Am open to whichever works for what i want — uberrebu
– uberrebu, Commented Aug 12, 2022 at 6:29

deaponn · Accepted Answer · 2022-08-12 07:09:21Z

3

To start off, you should not be doing that. Rather go for a syntax like

    if (isAdmin())
        return (
            <>
                <a href="/profile">admin</a>
                <div class="container"></div>
            </>
        );
    if (isAdmin() && isAdminTwo())
        return (
            <>
                <a href="/profile">admin2</a>
                <div class="container"></div>
            </>
        );
    if (isAdmin() && isAdminThree())
        return (
            <>
                <a href="/profile">admin3</a>
                <div class="container"></div>
            </>
        );
    return (
        <>
            <a href="/profile">user</a>
            <div class="container"></div>
        </>
    );

Or if you want to use it within other component that is always the same:

    let contents = (
        <>
            <a href="/profile">user</a>
            <div class="container"></div>
        </>
    );
    if (isAdmin())
        contents = (
            <>
                <a href="/profile">admin</a>
                <div class="container"></div>
            </>
        );
    if (isAdmin() && isAdminTwo())
        contents = (
            <>
                <a href="/profile">admin2</a>
                <div class="container"></div>
            </>
        );
    if (isAdmin() && isAdminThree())
        contents = (
            <>
                <a href="/profile">admin3</a>
                <div class="container"></div>
            </>
        );

    return <SameWrapper>{contents}</SameWrapper>;

But if you wanted to do it with ternary operators (which would be most probably not readable for other people and you in the future), kepp in mind correct syntax of ternary operator:

truthCheck ? ifTrue : ifFalse

So your example should go along the way

    isAdmin() ? (
        isAdminTwo() ? (
            <>
                <a href="/profile">admin2</a>
                <div class="container"></div>
            </>
        ) : isAdminThree() ? (
            <>
                <a href="/profile">admin3</a>
                <div class="container"></div>
            </>
        ) : (
            <>
                <a href="/profile">admin</a>
                <div class="container"></div>
            </>
        )
    ) : (
        <>
            <a href="/profile">user</a>
            <div class="container"></div>
        </>
    );

Where your truthCheck is there, and if true display a component, but if false perform next check. In your code these fragments are causing bugs:

<> // <--- these are not needed
{isAdminTwo()  ? (
<> // <--- these are not needed
// same for below

edited Aug 12, 2022 at 7:09

answered Aug 12, 2022 at 6:30

deaponn

8574 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

uberrebu Over a year ago

mind using the simple example i have rather than using components like return <Admin /> can you update with the way i have it please...thanks

deaponn Over a year ago

okay give me a sec

uberrebu Over a year ago

by the way the first conditional is a parent, and the others wrap under it, which was why i had it the way i did. isAdminTwo() and isAdminTwo() are child of isAdmin() i updated question also with this info

uberrebu Over a year ago

Did you read the update to the question? isAdminTwo() and isAdminThree() are children of isAdmin() which means that they all must meet isAdmin() condition first

deaponn Over a year ago

Yes I did, these checks will not be run unless isAdmin() is true

|

Collectives™ on Stack Overflow

How To Setup Multiple Conditionals Within React JSX?

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related