Display empty value when no results with extra menu item

Question

I have a Typeahead with a custom Menu using renderMenu. I am adding 2 custom Menu items to the bottom of the dropdown menu. One divider and a button.

When I don't add the extra items, and there are no results, it shows the empty label. When I do add the extra items, if there are no results, it doesn't show the "empty" label, since it thinks it has 2 items still.

How could I adjust to reflect the empty value where there are no results, but still something in the menu?

renderMenu = (results, menuProps) => {
            const { menuFooterButtonOptions } = this.props;
            
            // add all results from query
            const items = results.map((result, index) => (
                <MenuItem key={index} option={result} position={index}>
                    {menuProps.renderMenuItemChildren ? menuProps.renderMenuItemChildren(result, this.props, index) : result}
                </MenuItem>
            ));
            
            // add footerButton if needed
            if (menuFooterButtonOptions && menuFooterButtonOptions?.show) {
                const button = (
                    <MenuItem option={{key: "footerButton"}} onClick={(_) => {menuFooterButtonOptions.onClick();}} active={false}>
                        <span className={"btn-link"}>
                            {menuFooterButtonOptions.text}
                        </span>
                    </MenuItem>
                );
                items.push(<Menu.Divider />);
                items.push(button);
            }

            return (
                <Menu {...menuProps}>
                    {items}
                </Menu>
            );
        };

Answer 1

I solved it by just adding an empty element when there are no items.

if (menuFooterButtonOptions && menuFooterButtonOptions?.show && (items.length < 1)) {
    items.push(<MenuItem disabled={true} active={false}><span>No matches found.</span></MenuItem>);
}

Answer 2

Try something like this. If results exists render items, if not render the empty message.

            return (
            <Menu {...menuProps}>
                {results ? items: <MenuItem disabled={true} active={false}><span>No matches found.</span></MenuItem>}
            </Menu>
        );