Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Typescript prop error in ListItem (Material UI component)

I'm having an issue with the ContainerComponent and ContainerProps, i think the problem is that "li" is of type string, and i need to explicity define it as type of React.ElementType<React.HTMLAttributes>, but i don't know how.

<ListItem
  ContainerComponent="li"
  ContainerProps={{ ref: provided.innerRef }}
  {...provided.draggableProps}
  {...provided.dragHandleProps}
  style={getItemStyle(
      snapshot.isDragging,    
      provided.draggableProps.style
  )}
>

The Error I'm getting:

No overload matches this call. The last overload gave the following error. Type '"li"' is not assignable to type 'ElementType<HTMLAttributes> | undefined'. Type '{ ref: (element?: HTMLElement | null | undefined) => any; }' is not assignable to type 'HTMLAttributes'. Object literal may only specify known properties, and 'ref' does not exist in type 'HTMLAttributes'.ts(2769)

like image 935
Erik Galler Avatar asked Aug 24 '26 13:08

Erik Galler


1 Answers

Solved this by writing:

<ListItem
ContainerComponent={(<li />).type}
ref={provided.innerRef}                                             
{...provided.draggableProps}                                                 
{...provided.dragHandleProps}
style={getItemStyle                                                      
snapshot.isDragging,                                                      
provided.draggableProps.style)}
like image 153
Erik Galler Avatar answered Aug 26 '26 02:08

Erik Galler



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!