import { NextPage } from 'next';
import React from 'react';
interface Props {
name: string;
gretting?: string; // Error: ESLint: propType "gretting" is not required, but has no corresponding defaultProps declaration.(react/require-default-props)
}
const Hello: React.FunctionComponent<Props> = ({ name, gretting = 'night' }: Props) =>
<p>Hi {name} Good {gretting}</p>;
const Home: NextPage = () => <Hello name="Jhon Doe" />;
export default Home;
Eslint react plugin complain with this error ESLint: propType "gretting" is not required, but has no corresponding defaultProps declaration.(react/require-default-props).
According with this answer the approach used to defaultProps with default parameters values its fine so what is the best way to solve this issue? Use Hello.defaultProps = {} or turn off the rule react/require-default-props? there is a better approach?.
defaultProp is used when the passed prop is null or undefined
interface Props {
name: string;
gretting?: string;// question mark means it could be undefined
}
in this inter face you declared name as string, which mean it won't be null or undefined,
so you can skip defaultProp for it
but gretting is declared as string or undefined, so there is a change it will be undefined, so a defaultProp for it is necessary
Hello.defaultProps = {
gretting: '',
};
edit: found you need Typescript 3.0 as per this answer: https://stackoverflow.com/a/51486735/5059401
I've had this problem and fixed it by exporting the type or interface, though I can't explain why that was the solution to the issue.
export interface Props {
name: string;
greeting?: string;
}
const Hello = ({name, greeting = 'Hi'}: Props): JSX.Element = {}
edit: found you need Typescript 3.0 as per this answer: https://stackoverflow.com/a/51486735/5059401
I found another solution for functional components - you can just use React.FC, which provides type checking and autocomplete for static properties like defaultProps.
const Hello: React.FC<{name: string, gretting: string}> = ({ name, gretting = 'night' }) =>
In that case you don't have to use interface at all. But in case you want for some reason:
const Hello: React.FC<IProps> = ({ name, gretting = 'night' }) =>
===== UPDATE=====
Additionally:
"react/prop-types": "off" // Since we do not use prop-types
"react/require-default-props": "off" // Since we do not use prop-types