React javascript control showing/hidding items in a menu

codeitforfuture 0
Viewed 19

I started working with react Js recently and I try to show and hide items in a menu using ternary operator. My question is how not to show the items of the menu when they are empty, in other words when i use empty {} in the code as shown in the picture. enter image description here

renderFilterActions = () => [
{
  
  type: 'menu',
  style: { marginRight: 32 },
  onClick: (action) => action(),
  disabled: this.props.exporting,
  options: [

         !getUserPrivileges().canViewArbitrationParcels
          ? {
            disabled: this.props.exporting,
            label: 'Export dlp',
            //////
          }
          : {
            disabled: this.props.exporting,
            label: 'Download Excel',
            //////////
          },
          
          {
            disabled: this.props.exporting,
            label: 'export programming',
            ///////
          },

          getUserPrivileges().canRefreshVessel ?

          {
            disabled: this.props.exporting,
            label: 'VVVVVVVVVVVVVV',
            icon: (<Dice style={{ marginLeft: 2, marginTop: 3 }} />),
            action: () => {
              this.handleVesselModalClose();
            },

          }
          :
            {},
          

          getUserPrivileges().canRefreshVessel ?
          
            {
              disabled: this.props.exporting,
              label: 'RRRRRRRRRRRRRRR',
              ///////
            }
          :
            {}
          
        
    
  ],
},
{ type: 'primary', label: 'actions' , disabled: this.props.exporting },

];

reactjs javascript
1 Answers

It depends on how the library that you're using is implemented. Generally, if given a null, React won't render anything - but the library might still render a container with nothing in it.

The safest thing to do would be to remove the items you don't want to show from the list. One way to do this would be to return null in your ternary condition, and then filter out the nulls:

options: [
  // ---- 8< -----
  getUserPrivileges().canRefreshVessel 
    ? {
      disabled: this.props.exporting,
      label: 'RRRRRRRRRRRRRRR',
      ///////
    }
    : null,
  ].filter(option => !!option),
gerrod0
Related