Conditionally render a badge for active/inactive User

Question

I am trying to render conditionally a badge, based on the logged condition of a user. If the props coming from the server is true, then the badge is green, else grey.

I have tried various solutions, from basic if/else in the JSX, to classNames but the badge isn't being render.

My Code:

              {user.loggedIn ? (
                <div
                  className={classNames('badge badge-pill', {
                    'badge-success': user.loggedIn,
                    'badge-danger': !user.loggedIn
                  })}
                />

I don't see anything wrong with the code. I mean the item should have rendered, with multiple solutions. Any ideas, what I am doing wrong.

              <span
                className={
                  user.loggedIn ? 'badge badge-pill badge-success' : 'badge badge-pill badge-muted'
                }
              />

I have tried this as well.

I can see the element in the React-Dev-Tools, being render correctly, witht the right prop, but I cannot see it render in the screen.

score 1 · Accepted Answer · answered Mar 12 '19 at 07:45

Your contents will only get rendered if user is loggedIn. Also the div tag must be closed inside the condition { isLoggedIn }

you should try something like this:

        {user.loggedIn ? (
      <div className={'badge badge-pill badge-success'}>ENTER YOUR CONTENT HERE</div>) : (
            <div className={'badge badge-pill badge-danger'}>ENTER YOUR CONTENT HERE</div>
    )}

but since the div is self-closing and has no contents, it doesn't display it, so add some content too

Thank you. I wasn't thinking about content. Now I have to find out how to print a simple circle inside there without content... — , Mar 12 '19 at 07:53

score 0 · Answer 2 · answered Mar 12 '19 at 07:43

0

The badge for logged out user will never be displayed as you put a rendering condition around all the div with user.loggedInd ? (yourComponent...)

answered Mar 12 '19 at 07:43

Arnaud Christ

3,440
3
24
33

I posted another solution as well.. Could you explain what is wrong with the second one? If I move the condition inside the div, will that fix it? I think this is what I am doing with the second one. – Mar 12 '19 at 07:45
The second solution should display a `span` element in the DOM. Then, it's up to the classes you put on it to see if the display is meaningful or not. – Arnaud Christ Mar 12 '19 at 07:47

score 0 · Answer 3 · answered Mar 12 '19 at 07:49

0

If user.loggedIn is boolean, then you can just write

<div
  className={
    classNames('badge badge-pill', {
      'badge-success': user.loggedIn,
      'badge-danger': user.loggedIn
    })
  }
/>

answered Mar 12 '19 at 07:49

Diyorbek Sadullaev

453
4
10

score 0 · Answer 4 · answered Mar 12 '19 at 08:48

I think it's better to avoid conditional in jsx directly. You can do something like this:

let attachClass = ['badge', 'badge-pill']
   if(user.loggedIn){
      attachClass = [...attachClass, 'badge-success'].join(' ');
   }else{
      attachClass = [...attachClass, 'badge-danger'].join(' ');
   }

Than you can just return one div with className attach class:

<div className={attachClass}></div>

score 0 · Answer 5 · answered Mar 12 '19 at 09:53

0

The issue look into the user.loggedIn is not defined or return false

const loggedIn = true;
<span className={loggedIn ? 'badge-success' : 'badge-muted'}>
Css Change </span>

Codepen

answered Mar 12 '19 at 09:53

Dwarka Tiwari

185
1
8

Conditionally render a badge for active/inactive User

5 Answers5