`Property 'as' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'`

[jimmykane]

Example from recipeis

<div as={MessageInput}>
          <MessageInput />
          <button>Custom button</button>
        </div>

Typescript

Property 'as' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

[aledeloss]

Hi! I am having the same issue here, any comments of fixes on this? Thank you!

[supersnager]

@jimmykane @aledeloss There are two ways to fix it.

1. You can augment the 'react' module and add the as attribute:

   declare module 'react' {
   interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
       as?: string | typeof MessageInput;
   }
   }

or

2. Wrap the div with an additional component that has the as property:

interface ExtentedInputProps extends MessageInputProps {
    as?: string | typeof MessageInput;
}

const ExtendedInput = (props:ExtentedInputProps) => {
    return (
        <div>
            <span>Custom content</span>
            <MessageInput />
        </div>
    );
}

<ChatContainer>
  <MessageList></MessageList>
  <ExtendedInput as={MessageInput} />
</ChatContainer>

[supersnager]

I have added this explanation to the documentation: https://chatscope.io/storybook/react/?path=/docs/documentation-recipes--page#what-about-typescript

[jimmykane]

Thank you !

On Fri, 19 May 2023, 10:29 am Super Snager, @.***> wrote:

I have added this explanation to the documentation:

https://chatscope.io/storybook/react/?path=/docs/documentation-recipes--page#what-about-typescript

— Reply to this email directly, view it on GitHub https://github.com/chatscope/chat-ui-kit-react/issues/99#issuecomment-1554162870, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJVX4YPJTNIVSNS3SVRSOTXG4OMXANCNFSM6AAAAAAXK7AYOM . You are receiving this because you were mentioned.Message ID: @.***>