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

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

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