CODEWITHSUNDEEP
javascriptreactjs
codeitforfuture
codeitforfuture

Reputation: 17

React javascript control showing/hidding items in a menu

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 },

];

Upvotes: 0

Views: 25

Answers (1)

gerrod
gerrod

Reputation: 6627

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),

Upvotes: 1

Related Questions