I found a tutorial where navigation bar links are displayed as per a const
field created within the render()
method. While the code works great, I am trying to do a bit more.
If the user is Super admin (lets say), I would like to display both superAdminLinks
as well as userLinks
. I tried multiple things, but I am not able to get this thing right. Any help would be appreciated. Thanks!
My render()
code snippet, looks like below
render() {
const isSuperAdmin = user.user_role === "SUPER_ADMIN";
const userLeftMenu = (
<ul className="nav nav-sidebar">
<li>UserLink1</li>
<li>UserLink2</li>
</ul>
)
const superAdminLeftMenu = (
<ul className="nav nav-sidebar">
<li>SuperAdminLink1</li>
<li><SuperAdminLink2</li>
</ul>
)
return (
<header>
<div className="container-fluid">
<div className="row">
<div className="col-sm-3 col-md-2 sidebar">
{ isSuperAdmin ? superAdminLeftMenu : userLeftMenu }
</div>
</div>
</div>
</header>
);
}
Above code only renders SuperAdminLinks if the user is SuperAdmin. How can I render, both user and super admin links for SuperUser?
You can use React.Fragment :
const { render } = ReactDOM; const role = "SUPER_ADMIN"; const App = () => { const isSuperAdmin = role === "SUPER_ADMIN"; const userLeftMenu = ( <React.Fragment> <li>UserLink1</li> <li>UserLink2</li> </React.Fragment> ); const superAdminLeftMenu = ( <React.Fragment> <li>SuperAdminLink1</li> <li>SuperAdminLink2</li> {userLeftMenu} </React.Fragment> ); return ( <header> <div className="container-fluid"> <div className="row"> <div className="col-sm-3 col-md-2 sidebar"> <ul className="nav nav-sidebar"> {isSuperAdmin ? superAdminLeftMenu : userLeftMenu} </ul> </div> </div> </div> </header> ); }; render(<App />, document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>
<div className="col-sm-3 col-md-2 sidebar">
{ isSuperAdmin ? superAdminLeftMenu : userLeftMenu }
{ isSuperAdmin && userLeftMenu }
</div>
return (
<header>
<div className="container-fluid">
<div className="row">
<div className="col-sm-3 col-md-2 sidebar">
{ isSuperAdmin && superAdminLeftMenu }
{ isSuperAdmin && userLeftMenu }
</div>
</div>
</div>
</header>
)
If not is the case of UserLeftMenu
is always inside SuperUserLeftMenu
, then we can use one better way to do this. This form lets return all components you want inside same if
statement:
const { render } = ReactDOM; const role = "SUPER_ADMIN"; const App = () => { const isSuperAdmin = role === "SUPER_ADMIN"; const UserLeftMenu = () => ( <div> <li>UserLink1</li> <li>UserLink2</li> </div> ); const SuperAdminLeftMenu = () => ( <div> <li>SuperAdminLink1</li> <li>SuperAdminLink2</li> </div> ); return ( <header> <div className="container-fluid"> <div className="row"> <div className="col-sm-3 col-md-2 sidebar"> { isSuperAdmin ? <div> <SuperAdminLeftMenu/> <UserLeftMenu/> </div> /* Return 'SuperAdminLeftMenu' and 'UserLeftMenu' components. If you returns components of this form, you can return all component you want inside same if */ : <UserLeftMenu /> } </div> </div> </div> </header> ); }; render(<App />, document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>
If UserLeftMenu
is always inside SuperUserLeftMenu
, you can do something like:
const { render } = ReactDOM; const role = "SUPER_ADMIN"; const App = () => { const isSuperAdmin = role === "SUPER_ADMIN"; const UserLeftMenu = () => ( <div> <li>UserLink1</li> <li>UserLink2</li> </div> ); const SuperAdminLeftMenu = () => ( <div> <li>SuperAdminLink1</li> <li>SuperAdminLink2</li> { <UserLeftMenu/> } </div> // Include 'UserLeftMenu' inside 'SuperAdminLeftMenu' ); return ( <header> <div className="container-fluid"> <div className="row"> <div className="col-sm-3 col-md-2 sidebar"> { isSuperAdmin ? <SuperAdminLeftMenu/> // Return 'SuperAdminLeftMenu' component : <UserLeftMenu /> } </div> </div> </div> </header> ); }; render(<App />, document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.