React Typescript prop error in ListItem (Material UI component)

user_13219528 0
Viewed 464

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)

react-props material-ui typescript reactjs types
1 Answers

Solved this by writing:

<ListItem
ContainerComponent={(<li />).type}
ref={provided.innerRef}                                             
{...provided.draggableProps}                                                 
{...provided.dragHandleProps}
style={getItemStyle                                                      
snapshot.isDragging,                                                      
provided.draggableProps.style)}
user_132195280
Related