import React, { useState, useRef } from 'react' import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex } from '../..' const DropdownWithHook = (props) => { // eslint-disable-next-line no-unused-vars const [selectedOption, setSelectedOption] = useState(); const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true); const buttonRef = useRef(null); const options = [ { label: "United States", value: "United States", areaCode: "+1", icon: "πŸ‡ΊπŸ‡Έ", id: "United-states" }, { label: "Canada", value: "Canada", areaCode: "+1", icon: "πŸ‡¨πŸ‡¦", id: "canada" }, { label: "Pakistan", value: "Pakistan", areaCode: "+92", icon: "πŸ‡΅πŸ‡°", id: "pakistan" } ]; return (
setIsDropdownClosed(!isDropDownClosed)} variant="secondary" /> setSelectedOption(selectedItem)} options={options} triggerRef={buttonRef} {...props} > {options.map((option) => ( <> ))}
) } export default DropdownWithHook