question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow conditional rendering inside `SidenavHeader`

See original GitHub issue

Summary

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:

image

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
fabien0102commented, Sep 3, 2018

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 😉

1reaction
nick-barthcommented, Sep 3, 2018

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 &&.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found