How to fix Binding element 'children' implicitly has an 'any' type.ts(7031)?

Question

I'm missing something here with the validation how to add types validation? Having error "element 'children' implicitly has an 'any' type".

import * as React from 'react';
import Button from './Styles';

const Button1 = ({ children, ...props }) => (
  <Button {...props}>{children}</Button>
);

Button1.propTypes = {};

export default Button1;

Answer 1

Edit 2022: with react 18, FC no longer provides children, so you have to type it yourself, and you can drop FC:

import React, { ReactNode } from "react";

interface Props {
    children?: ReactNode
    // any props that come into the component
}

const Button1 = ({ children, ...props }: Props) => (
    <Button {...props}>{children}</Button>
);

Yes you are missing a type for Props as whole, which means typescript sees it as any and your ts rules dont allow it.

You have to type your props as:

import React, { FC } from "react";

interface Props {
    // any props that come into the component
}

const Button1: FC<Props> = ({ children, ...props }) => (
    <Button {...props}>{children}</Button>
);

Answer 2

This was a major issue for me and I wasted a lot of time figuring out the correct solution. Right now you have an error with the children prop but in the future, you might have this error for a lot of functions where you are destructuring the params. So I would suggest, follow this GitHub issue.

const yourfunc = ({destructuredProps}: {destructuredProps: type}) => {}

Answer 3

You can also add the predefined type to your functional components like this:

const Button1: React.FC<{}>  = ({ children }) => (
    <Button>{children}</Button>
);

By this way you don't have to repeat yourself to define children props.

The fuller version could be like this:

interface Props {
// any other props that come into the component, you don't have to explicitly define children.
}

const Button: React.FC<Props> = ({ children, ...props }) => {
  return (
      <Button {...props}>{children}</Button>
  );
};

Please note it works for React 16.8

Answer 4

As another approach, you can use the built-in generic type "React.PropsWithChildren" for children in props, taking those props accordingly. A very short code would look like this:

import React from "react";
import Button from "./Styles";

type MyComponentProps = React.PropsWithChildren<{}>;

export default function MyComponent({ children, ...other}: MyComponentProps) {
  return <Button {...other}>{children}</Button>;
}

Answer 5

You can use types as well

type ButtonProps = {
    children: ReactNode;
    
}

const Button = ({ children }: ButtonProps) => (
    <button>{children}</button>
);

Answer 6

I find it best to have the component props interface extend from React.HTMLAttributes because it gives you the standard HTML attributes without any extra configuration:

interface Button1Props extends React.HTMLAttributes<Element> {
  // add any custom props, but don't have to specify `children`
}

const Button1 = ({ children, ...props }: Button1Props) => (
    <Button {...props}>{children}</Button>
)

If you want to enforce children to be provided, you can make it required by redefining it in the props interface:

interface Button1Props extends React.HTMLAttributes<Element> {
  children: React.ReactNode
  // add any custom props, but don't have to specify `children`
}

const Button1 = ({ children, ...props }: Button1Props) => (
    <Button {...props}>{children}</Button>
)

Answer 7

It needs 'any' so give it !

const Button1 = ({ children, ...props } : any)

Then handle it in function if you want to preserve the type

Answer 8

Also do this to stop error: children?: React.ReactNode;

export interface props {
    children?: React.ReactNode; }

const Screen = ({ children }: props) => {
    return (
        <div style={{ margin: '2%' }}>
            {children}
        </div>
    ); };

export default Screen;

Answer 9

This error can be fixed by explicitly defining type for the variable (children in this case) and not leaving it to be implicitly inferred

Error can be stopped altogether with TypeScript --noImplicitAny compiler option

Answer 10

One answer I found and wanted to share, but will probably be highly frowned upon, is that you can set skipLibCheck to true in your tsconfig.json within the compilerOptions object, and it will ignore the issue.

As a caveat, please ensure you know what you are doing when adding this rule. A good article about this is here: https://www.testim.io/blog/typescript-skiplibcheck/

Answer 11

Not specifically due to this issue, but related to it, because of the children prop: The usage of React.FC discouraged and by now is officially removed from from Typescript template. https://github.com/facebook/create-react-app/pull/8177

Answer 12

Write this code, it shoud fix your problem: enter image description here