I have the following menu array:

myMenu: [      
  { id: 'New Job', active: false, href: '/new-job' },
  { id: 'Delete Jobs', active: false, href: '/delete-job' },
  { id: 'All Jobs', active: false, href: '/all-jobs' }
]

Now based on a condition, I want to be able to conditionally display or not display specific array object elements within my myMenu array.

For instance, a user may not have access to create a new job and so, I would like to hide the following element, so that it's not rendered on the left menu nav, that is:

{ id: 'New Job', active: false, href: '/new-job' },

I tried the following but it didn't work:

myMenu: [   
  hasAccess(user) ?
     { id: 'New Job', active: false, href: '/new-job' }
  : {},
  { id: 'Delete Jobs', active: false, href: '/delete-job' },
  { id: 'All Jobs', active: false, href: '/all-jobs' }
]

So basically, if hasAccess(user) is true then I expect the following array to be rendered:

myMenu: [      
  { id: 'New Job', active: false, href: '/new-job' },
  { id: 'Delete Jobs', active: false, href: '/delete-job' },
  { id: 'All Jobs', active: false, href: '/all-jobs' }
]

otherwise render:

myMenu: [      
  { id: 'Delete Jobs', active: false, href: '/delete-job' },
  { id: 'All Jobs', active: false, href: '/all-jobs' }
]