Is it possible to pass href from <Link> through a HOC into an <a tag>?

Damian Huzau 0
Viewed 20

I have the following situation in the main component

<Link href={'test'}>
      <PrimaryAnchor>Welcome</PrimaryAnchor>
</Link>

in PrimaryAnchor component

const PrimaryAnchor = forwardRef(function PrimaryAnchor({ children, extraClass = '', ...props }, ref) {
    return (
        <a className={`primary-btn ${extraClass}`} {...props}>
            <div></div>
            <div></div>
            <div></div>
            {children}
        </a>
    )
});

What I want is to have the href tag from Link inside the tag from the Primary component.

Do you have any suggestions?

Thanks

next.js reactjs javascript
1 Answers

You need to pass the ref to the a element.

const PrimaryAnchor = forwardRef(function PrimaryAnchor({ children, extraClass = '', onClick, href }, ref) {
    return (
        <a ref={ref} onClick={onClick} href={href} className={`primary-btn ${extraClass}`}>
            <div></div>
            <div></div>
            <div></div>
            {children}
        </a>
    )
});

RESOURCE

userYBSN0
Related