Question 245477 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Display empty value when no results with extra menu item

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>
            );
        };
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>);
}

  2. 0

    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>
        );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search