Переключение вниз в Reactjs - раскрывающееся меню только с выбранным элементом

Question

У меня проблемы с использованием Downshift Изначально у меня есть все пункты меню, но как только я выберу один вариант, он будет единственным, который будет отображаться в меню при следующем нажатии.

ht tps:https://stackru.com/images/95a1581eab7aa58835a037daeb62e9a0bf1d385c.png

Это мой текущий код, какие-либо отзывы о том, что вызвало это?

const dropdownItems = [
  { value: 'All' },
  { value: 'Database A' },
  { value: 'Database B' },
  { value: 'Database C' },
  { value: 'Database D' },
];
return (
  <Downshift itemToString={item => (item ? item.value : '')}>
    {({
      getMenuProps,
      getItemProps,
      getToggleButtonProps,
      getRootProps,
      isOpen,
      inputValue,
      selectedItem,
      highlightedIndex,
    }) => console.log(
      selectedItem === null ? dropdownItems[0].value : selectedItem.value,
    ) || (
        <Container {...getRootProps()}>
          <button {...getToggleButtonProps()}>
            {isOpen
              ? selectedItem === null
                ? dropdownItems[0].value
                : selectedItem.value
              : selectedItem === null
                ? dropdownItems[0].value
                : selectedItem.value}
          </button>
          {isOpen ? (
            <Menu {...getMenuProps()}>
              {dropdownItems
                .filter(
                  item => !inputValue || item.value.includes(inputValue),
                )
                .map((item, index) => (
                  <Item
                    {...getItemProps({
                      key: item.value,
                      index,
                      item,
                      style: {
                        fontWeight:
                          index === highlightedIndex
                            ? 'bold'
                            : null,
                      },
                    })}
                  >
                    {item.value}
                  </Item>
                ))}
            </Menu>
          ) : null}
        </Container>
      )
    }
  </Downshift>
);

Answer 1

.filter(item => !inputValue || item.value.includes(inputValue),) 

Чтобы исправить эту проблему, я удалил .filter, Он вызывал только выбранное значение, чтобы показать в раскрывающемся списке.

Это обновленный тег меню

 <Menu {...getMenuProps()}>
     {dropdownItems.map((item, index) => (
        <Item
            {...getItemProps({
                  key: item.value,
                 index,
                   item,
                      style: {
                  fontWeight:
                   index === highlightedIndex
                    ? 'bold'
                    : null,
                       },
                        })}
              >
          {item.value}
         </Item>
         ))}
          </Menu>