CODEWITHSUNDEEP
reactjstypescriptmaterial-uiuse-ref
Mahdi Zeynali
Mahdi Zeynali

Reputation: 143

How to type Material-UI ListItemButton ref?

I wrote this code but I have an error with this content. Why is this happening and how can I solve this? I use Material UI, ListButtonItem is from material.

const AccordionChildItem = ({ parentLabel, title, action }: { title: string; parentLabel: string ; action:string}) => {
    const ListItemRef = useRef<HTMLElement>()
    const clickItem = () => {...}
        
    return (
        <ListItemButton
            ref={ListItemRef}
            className='list-item-for-navbar'
            onClick={clickItem}
            sx={{ py: '4px', pl: 1, pr: 5, fontSize: 14, mb: 1,color:'#8A92A6' }}>
                {title}
        </ListItemButton>
    )
}

Error:

No overload matches this call.
  Overload 1 of 3, '(props: { href: string; } & ListItemButtonBaseProps & Omit<{ action?: Ref<ButtonBaseActions> | undefined; centerRipple?: boolean | undefined; ... 11 more ...; TouchRippleProps?: Partial<...> | undefined; }, "classes"> & CommonProps & Omit<...>): Element', gave the following error.
    Type 'MutableRefObject<HTMLElement | undefined>' is not assignable to type '((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined'.
      Type 'MutableRefObject<HTMLElement | undefined>' is not assignable to type 'RefObject<HTMLAnchorElement>'.
        Types of property 'current' are incompatible.
          Type 'HTMLElement | undefined' is not assignable to type 'HTMLAnchorElement | null'.
            Type 'undefined' is not assignable to type 'HTMLAnchorElement | null'.
  Overload 2 of 3, '(props: { component: ElementType<any>; } & ListItemButtonBaseProps & Omit<{ action?: Ref<ButtonBaseActions> | undefined; ... 12 more ...; TouchRippleProps?: Partial<...> | undefined; }, "classes"> & CommonProps & Omit<...>): Element', gave the following error.
    Property 'component' is missing in type '{ children: string; ref: MutableRefObject<HTMLElement | undefined>; className: string; onClick: () => void; sx: { py: string; pl: number; pr: number; fontSize: number; mb: number; color: "#8A92A6"; }; }' but required in type '{ component: ElementType<any>; }'.
  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ListItemButtonTypeMap<{}, "div">>>): Element', gave the following error.
    Type 'MutableRefObject<HTMLElement | undefined>' is not assignable to type '((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
      Type 'MutableRefObject<HTMLElement | undefined>' is not assignable to type 'RefObject<HTMLDivElement>'.
        Types of property 'current' are incompatible.
          Type 'HTMLElement | undefined' is not assignable to type 'HTMLDivElement | null'.
            Type 'undefined' is not assignable to type 'HTMLDivElement | null'.ts(2769)

Upvotes: 0

Views: 1832

Answers (2)

Mahdi Zeynali
Mahdi Zeynali

Reputation: 143

it works finally for me like this

const ListItemRef = useRef<HTMLDivElement|null>(null)

Upvotes: 0

juliomalves
juliomalves

Reputation: 50308

Ultimately, the ListItemButton component renders a <div> element. You need pass the type HTMLDivElement to the useRef's generics.

const ListItemRef = useRef<HTMLDivElement>()

Upvotes: 1

Related Questions