import { useState } from "react"; import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, } from "reactstrap"; import toNoteVariety from "src/NoteVariety"; const NoteVarietyInput = ({ noteVariety, setNoteVariety, }: { noteVariety: number; setNoteVariety: (noteVariety: number) => void; }) => { const [isNoteVarietyOpened, setNoteVarietyOpened] = useState(false); const onInput = (noteVariety: number) => () => { setNoteVariety(noteVariety); }; return ( <Dropdown isOpen={isNoteVarietyOpened} toggle={() => { setNoteVarietyOpened(!isNoteVarietyOpened); }} > <DropdownToggle caret>{toNoteVariety(noteVariety)}</DropdownToggle> <DropdownMenu> <DropdownItem onClick={onInput(0)}>{toNoteVariety(0)}</DropdownItem> <DropdownItem onClick={onInput(1)}>{toNoteVariety(1)}</DropdownItem> <DropdownItem onClick={onInput(3)}>{toNoteVariety(3)}</DropdownItem> </DropdownMenu> </Dropdown> ); }; export default NoteVarietyInput;