I am currently migrating a Next.js project from JavaScript to TypeScript, and I've run into an error: Property 'className' does not exist on type '{ props: ReactNode; }'
. In Javascript, I can extract className from props but typescript cannot find the type. Here is the code:
import { useRouter } from 'next/router'
import Link from 'next/link'
import { ReactNode } from 'react'
export { NavLink }
NavLink.defaultProps = {
exact: false,
}
interface NavLinkProps {
href: string
exact?: boolean
children: ReactNode
props: ReactNode
}
function NavLink({ href, exact, children, ...props }: NavLinkProps) {
const { pathname } = useRouter()
const isActive = exact ? pathname === href : pathname.startsWith(href)
if (isActive) {
props.className += ' active'
}
return (
<Link href={href}>
<a {...props}>{children}</a>
</Link>
)
}
}
Your interface declaring NavLinkProps
is wrong. You shouldn't add props
because you're spreading the rest of the object which would be anything in the interface after href
, exact
and children
. The interface should look like this:
interface NavLinkProps {
href: string
exact?: boolean
children: ReactNode
className: string
// any other props you might have
}
So the props object that exists from spreading – ...props
would be:
{
className,
// any other props you might have
}
see this doc for more info – https://reactjs.org/docs/jsx-in-depth.html#spread-attributes