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"
/>