Property 'className' does not exist on type '{ props: ReactNode; }'

Question

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>
  )
}

}

Answer 1

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