How to type Material-UI ListItemButton ref?

Question

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)

juliomalves · Accepted Answer · 2021-12-28 22:22:59Z

1

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

const ListItemRef = useRef<HTMLDivElement>()

edited Dec 28, 2021 at 22:22

answered Dec 28, 2021 at 22:17

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

miklando Over a year ago

This is almost correct. useRef actually returns an object with a "current" property that points to the HTMLDivElement

juliomalves Over a year ago

You're correct, but I don't think my answer contradicts that fact? Or did you mean it as additional information that I didn't mention? I didn't think it was relevant to this question.

miklando Over a year ago

I worded it weird but yeah just extra info

Mahdi Zeynali Over a year ago

thanks for your answer but it doesnt work !!

juliomalves Over a year ago

@MahdiZeynali Do you mean you're still seeing the same error?

|

Mahdi Zeynali · Accepted Answer · 2021-12-31 06:52:17Z

0

it works finally for me like this

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

answered Dec 31, 2021 at 6:52

Mahdi Zeynali

2281 gold badge2 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to type Material-UI ListItemButton ref?

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related