Generic Props in React and TypeScript to get rid of Children being Implicitly Any

getting rid of the children implicitly has an any type error by typing spread props as generics in a React and TypeScript wrapper component

error TS7031: Binding element "children" implicitly has an "any" type.

If you have ever come across the error above, it usually happens in a situation where you have a wrapper element that will have children, but you don’t know all the other props it might be getting and are spreading them..

You can get rid of the error by typing the props you are spreading as generic props. Code would look like below:

 1import { ReactNode } from 'react'
 2
 3interface Props<T> {
 4  props: T
 5  children: ReactNode
 6}
 7
 8export default function CardList<T>({ children, ...rest }: Props<T>) {
 9  return (
10    <div {...rest}>
11      {children}
12    </div>
13  )
14}

Notes:

• The usage of React.FC is discouraged and is officially removed from the CRA Typescript template.
• With React 18, FC no longer provides children, so you have to type it yourself, and you can drop FC

Links

• React Components with GENERICS? - Advanced TypeScript
• Generics
• Remove React.FC from Typescript template #8177
• How to fix Binding element ‘children’ implicitly has an ‘any’ type.ts(7031)?