React: conditionally render an item in the menu

Question

I'm using React with Material-UI. I'm developing a simple UI in a form of a dropdown menu. I'd like to control the rendering of the first row with condition passed as a prop. How can I use the condition to render or skip rendering of the first row?

export const NativeSdkMenu = memo(({ showFirstMenuItem }) => (
  <Menu>
    <MenuItem component="a" href={link1}>
      {"First"}
    </MenuItem>
    <MenuItem component="a" href={link1}>
      {"Second"}
    </MenuItem>
    <MenuItem component="a" href={link1}>
      {"Third"}
    </MenuItem>
    <MenuItem component="a" href={link1}>
      {"Fourth"}
    </MenuItem>
  </Menu>
));

Obviously this doesn't work:

if (showFirstMenuItem) {
    <MenuItem component="a" href={link1}>
      {"First"}
    </MenuItem>
}

I've tried a few similar approaches, but it looks like I need to use some specific JSX syntax which I don't know.

Please show your attempt. We'll be happy to show you where it went wrong, or a better alternative. If there has been no attempt, please read the section of the docs on conditional rendering, specifically the section on inline conditions. — Brian Thompson
– Brian Thompson, Commented Nov 11, 2020 at 14:25
Does this answer your question? Is it possible to use if...else... statement in React render function? — Brian Thompson
– Brian Thompson, Commented Nov 11, 2020 at 14:30

jean182 · Accepted Answer · 2020-11-11 14:29:15Z

4

Based on your sample and assuming your prop showFirstMenuItem is a boolean you can simply use the && operator to show the first item if your showFirstMenuItem is true:

export const NativeSdkMenu = memo(({ showFirstMenuItem }) => (
 <Menu>
  {showFirstMenuItem && (
    <MenuItem component="a" href={link1}>
      {"First"}
   </MenuItem>)}
   <MenuItem component="a" href={link1}>
    {"Second"}
   </MenuItem>
   <MenuItem component="a" href={link1}>
     {"Third"}
   </MenuItem>
   <MenuItem component="a" href={link1}>
    {"Fourth"}
   </MenuItem>
  </Menu>
  ));

answered Nov 11, 2020 at 14:29

jean182

3,5332 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Richard Topchii Over a year ago

Excellent solution. Enclosing the whole menuitem into parenthesis () was the root cause of the few of my approaches not working.

jean182 Over a year ago

You're welcome, you can take a look on this article to see some other approaches for conditional rendering: robinwieruch.de/conditional-rendering-react

Richard Topchii Over a year ago

Thanks, I've seen that article actually before trying few of my approaches...

Sohaib · Accepted Answer · 2020-11-11 14:27:27Z

2

Quite simple actually

export const NativeSdkMenu = memo(({ showFirstMenuItem }) => (
  <Menu>
   {showFirstMenuItem && <MenuItem component="a" href={link1}>
   {"First"}
  </MenuItem>}
  <MenuItem component="a" href={link1}>
   {"Second"}
  </MenuItem>
  <MenuItem component="a" href={link1}>
   {"Third"}
  </MenuItem>
  <MenuItem component="a" href={link1}>
   {"Fourth"}
  </MenuItem>
</Menu>
));

answered Nov 11, 2020 at 14:27

Sohaib

11.4k9 gold badges35 silver badges36 bronze badges

1 Comment

Richard Topchii Over a year ago

Good direction, but also I had to add ( and ) around the whole MenuItem to make it compile.

AltoDev · Accepted Answer · 2020-11-11 14:28:47Z

1

You can set css class conditionnally with your prop value :

<MenuItem component="a" href={link1} className={this.props.showFirstMenuItem ? style['your-class-name'] : ''}>
  {"First"}
</MenuItem>

answered Nov 11, 2020 at 14:28

AltoDev

661 silver badge7 bronze badges

3 Comments

Richard Topchii Over a year ago

I'd prefer react-based solution, so that I won't have to modify styles / create classes, but thanks for the help!

AltoDev Over a year ago

Srry I missread i thought u want to render in a different way and not just show / hide !!

Richard Topchii Over a year ago

No problem. I wanted just to hide/show the first (or any other item) in the menu by controlling it with a prop that passed externally.

Collectives™ on Stack Overflow

React: conditionally render an item in the menu

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related