Push items to fluent ui commandbar component

Viewed 781

I am using the fluent UI command bar component. When I try to push additional items to the _items array after the initial render, the command bar adds them as overflow items in the clickable ellipsis at the end of the command bar. If the condition is met and they are pushed before the initial render, they render properly, as normal command bar items. How do I make them render properly if they are pushed after the initial render?

const _items: ICommandBarItemProps[] = [
      {
        key: 'send',
        text: 'Send',
        iconProps: { iconName: 'Send' },
        onClick: (e) => {action('send', editableValues, null, dispatch, data.id)},
      },
      {
        key: 'save',
        text: 'Save',
        iconProps: { iconName: 'Save' },
        onClick: (e) => {asn('save', editableValues, null, dispatch, data.id, index)},
      },

      {
        key: 'history',
        text: 'History',
        iconProps: { iconName: 'History' },
        onClick: (e) => {asn('hist', editableValues, null, dispatch, data.id)},
      },
];

// items I want to push

if (some condition is met) {
  const _additional_items: ICommandBarItemProps[] = [
     {
         key: 'download',
         text: 'Download',
         iconProps: { iconName: 'Download' },
         onClick: (e) => {asn('down', editableValues, null, dispatch, data.id)},
     },{
         key: 'print',
         text: 'Print',
         iconProps: { iconName: 'Print' },
         onClick: (e) => {asn('prnt', editableValues, null, dispatch, data.id)}
     }
  ]
  _items.concat(_additional_items)
}

// here is my basic command bar implementation

 <CommandBar
    items={_items}
    ariaLabel="Use left and right arrow keys to navigate between commands"
 />
1 Answers

Try to add

<CommandBar
    items={_items}
    ariaLabel="Use left and right arrow keys to navigate between commands"
    onReduceData={()=>undefined}   
/>

Referred from CommandBar

Related