Allow conditional rendering inside `SidenavHeader`
See original GitHub issueSummary
Actually this pattern is not possible:
<Sidenav compact>
<SidenavHeader label="Conditional render">
<SidenavItem label="classic item" />
{isDev && <SidenavItem label="not possible yet" />}
</SidenavHeader>
</Sidenav>
When isDev === false
:
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (6 by maintainers)
Top Results From Across the Web
Conditional Rendering - React
Conditional rendering in React works the same way conditions work in JavaScript. ... the current state, and let React update the UI to...
Read more >7 Ways to Implement Conditional Rendering in React ...
In React, it allows us to render different elements or components based on a condition. This concept is applied often in the following...
Read more >React conditional rendering: 9 methods with examples
Learn how to do conditional rendering in React. ... JSX is a powerful extension to JavaScript that allows us to define UI components....
Read more >Six methods to achieve conditional rendering in React - Flexiple
We use an if with our condition and return the element to be rendered. Let's observe the example below. Consider these two components:....
Read more >5 Ways to Implement Conditional Rendering in React
We are using if-else in JSX to conditionally render part of the UI. ... The curly braces allow us to add and evaluate...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This should probably works ^^ It’s actually not a big or complex issue 😉 I was just totally inside a rush when I wrote this issue, so it’s more to avoid to forget 😉
I concur, while without proper context, it’s hard for us to say this is the definitive answer, but from what we currently know, a null check in SidenavHeader would allow us to conditionally render using
&&
.