Footer as prop not working

[revolterab]

• [X ] I have searched the Issues to see if this bug has already been reported
• [X ] I have tested the latest version

Steps to reproduce

import { Footer } from "flowbite-react"; import { Link } from "react-router-dom";

    <Footer container>
        <div className="w-full text-center">
            <div className="w-full justify-between sm:flex sm:items-center sm:justify-between">
                <Footer.Brand
                    as={Link}
                    to="/"
                    src="https://flowbite.com/docs/images/logo.svg"
                    alt="Flowbite Logo"
                    name="Flowbite"
                />
                <Footer.LinkGroup>
                    <Footer.Link as={Link} to="/about">
                        About
                    </Footer.Link>
                    <Footer.Link as={Link} to="/contact">
                        Contact
                    </Footer.Link>
                </Footer.LinkGroup>
            </div>
            <Footer.Divider />
            <Footer.Copyright as={Link} to="/" by="Flowbite™" year={2022} />
        </div>
    </Footer>

Current behavior

When I assign the as prop to the Footer elements, I get below errors

Type '{ as: ForwardRefExoticComponent<LinkProps & RefAttributes>; to: string; by: string; year: number; }' is not assignable to type 'IntrinsicAttributes & CopyrightProps'. Property 'as' does not exist on type 'IntrinsicAttributes & CopyrightProps'.

Type '{ children: string; as: ForwardRefExoticComponent<LinkProps & RefAttributes>; to: string; }' is not assignable to type 'IntrinsicAttributes & FooterLinkProps'. Property 'to' does not exist on type 'IntrinsicAttributes & FooterLinkProps'.

Expected behavior

The Footer component should accept the as prop just like the other components do (such as Sidebar, Navbar etc.)

Context

I am trying to use the as prop

[SutuSebastian]

@nigellima similar issue as for the Button as prop component, maybe similar fix? 🤔

[nigellima]

@nigellima similar issue as for the Button as prop component, maybe similar fix? 🤔

yeah. Footer.Link doesn't use the BaseButton though. But the issue is similar and the new generic TS types should fix it

[revolterab]

@nigellima pardon my lack of knowledge, but is there anything we could do to fix this, or is this a matter of waiting? Not sure I understood the "new generic TS types" part. Thank you

[nigellima]

@nigellima pardon my lack of knowledge, but is there anything we could do to fix this, or is this a matter of waiting? Not sure I understood the "new generic TS types" part. Thank you

Yes. This PR here introduced some new generic TS types to properly infer the prop types of the element passed to the as prop and also prevent this kind of error happening. What should be done now is using these generic types in all the places we have this as prop

https://github.com/themesberg/flowbite-react/pull/1244