CODEWITHSUNDEEP
javascriptreactjstypescript
Ktr1000
Ktr1000

Reputation: 253

React with Typescript:Unable to pass function prop to child component

When i try to pass hook to functional component i get this error:

Type '() => void' is not assignable to type 'FunctionComponent<InputProps>'.
  Type 'void' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.


import * as React from 'react';

interface InputProps {
    name:string,
    //This is the hook im trying to pass
    setHook:(hookValue:string) => void,
    placeholder:string,
    value:string,
    type:string,
    validationErrorParams:[],
    textArea:boolean
}
const Input: React.FunctionComponent<InputProps> = () => {
  return ;
};

export default Input;

Upvotes: 0

Views: 2275

Answers (1)

jgoday
jgoday

Reputation: 2836

Your functional component signature (React.FunctionComponent) doesn't match with your functional componenet implementation ( () => {} )

const BadInput: React.FunctionComponent<InputProps> = () => {
  return;
};
// BadInput signature is () => void 

const Input: React.FunctionComponent<InputProps> = (props: InputProps) => {
  return <span></span>;
};
// Input matchs the signature (InputProps) => React.Element

If you look at the FunctionComponent interface you will notice that it have to implement a function like (props: P & { children?: ReactNode }, context?: any): ReactElement | null;

interface FunctionComponent<P = {}> {
    (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null;
    propTypes?: WeakValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

Upvotes: 1

Related Questions