javascriptreactjsconditional-statements

React render based on OR operator


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="/companies/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')

Solution

  • Forgot to wrap :)

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

    hope it helps somebody

    Thanks!