javascript - React render based on OR operator - Stack Overflow

I'm creating a menu that shows items based on user roles.

Some items must show if role is A OR B, but I cant make this work.

Code example :

      {
       (this.props.currentUser.role === 'admin') || ( this.props.currentUser.role === 'contra')  &&
        <Dropdown item text='ADMIN'>
          <Dropdown.Menu>
            {
              this.props.currentUser.role === 'admin' &&
            <div>
              <Dropdown.Item>
                <Link to="/panies/list">Companies</Link>
              </Dropdown.Item>
              <Dropdown.Item>
                <Link to="/obs-report">Obs Report</Link>
              </Dropdown.Item>
            </div>
            }
            <Dropdown.Item>
              <Link to="/users/list">Users</Link>
            </Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      }

This shows properly items only for "contra" role, not sure about why is not working with 'admin' role.

Tried with this too with no success :

this.props.currentUser.role === ('admin' || 'contra')

I'm creating a menu that shows items based on user roles.

Some items must show if role is A OR B, but I cant make this work.

Code example :

      {
       (this.props.currentUser.role === 'admin') || ( this.props.currentUser.role === 'contra')  &&
        <Dropdown item text='ADMIN'>
          <Dropdown.Menu>
            {
              this.props.currentUser.role === 'admin' &&
            <div>
              <Dropdown.Item>
                <Link to="/panies/list">Companies</Link>
              </Dropdown.Item>
              <Dropdown.Item>
                <Link to="/obs-report">Obs Report</Link>
              </Dropdown.Item>
            </div>
            }
            <Dropdown.Item>
              <Link to="/users/list">Users</Link>
            </Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      }

This shows properly items only for "contra" role, not sure about why is not working with 'admin' role.

Tried with this too with no success :

this.props.currentUser.role === ('admin' || 'contra')

• javascript
• reactjs
• conditional-statements

Share Improve this question Follow edited May 28, 2024 at 16:34 Pavel Fedotov 88511 gold badge88 silver badges3535 bronze badges asked Mar 14, 2018 at 6:09 llermalyllermaly 2,51033 gold badges1919 silver badges3535 bronze badges 3

• check by enclosing (this.props.currentUser.role === 'admin') || ( this.props.currentUser.role === 'contra') with another paranthesis like ((this.props.currentUser.role === 'admin') || ( this.props.currentUser.role === 'contra')) && .... – G_S Commented Mar 14, 2018 at 6:14
• Yes!, just noted that. Thanks for your answer – llermaly Commented Mar 14, 2018 at 6:15
• happy that you noted that – G_S Commented Mar 14, 2018 at 6:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Forgot to wrap :)

((this.props.currentUser.role == 'admin') || ( this.props.currentUser.role == 'contra'))  &&

hope it helps somebody

Thanks!