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; }' 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