MENU


Select Box


RESETRUNFULL
import {useSelect} from 'downshift';const items = ['apple','apricot','pear','orange','grape','banana'];export default function App() {
   const {isOpen, selectedItem, getToggleButtonProps, getLabelProps, getMenuProps,
            highlightedIndex, getItemProps} = useSelect({items})
  return (<div><label {...getLabelProps()}>Choose an element:</label>
                      <button type="button" {...getToggleButtonProps()}>
                         {selectedItem || 'Elements'}
                      </button>
                      <ul {...getMenuProps()}>
                         {isOpen && items.map((item, index) => (
                         <li
  style={highlightedIndex ===index?{backgroundColor: '#bde4ff'} : {}}
                               key={`${item}${index}`} {...getItemProps({item, index})}>
                            {item}
                        </li>))}
                     </ul>
   </div>);}