34

What I have

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;

Problem

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?.

Cristian Flórez
  • 2,277
  • 5
  • 29
  • 51

3 Answers3

32

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

enk1
  • 527
  • 3
  • 7
  • 1
    I cant to reproduce this, in my case `eslint` continue showing the same error in the interface... i need more context, do u use in some place `Hello.defaultProps = {}` or sometihng aditional that u dont post in the answer? – Cristian Flórez Sep 27 '20 at 06:01
  • No, I didn't use defaultProps, I już switched `FunctionalComponent` with `FC` and I removed interface type from parentheses. I also used very strict eslint config with full airbnb. I found this solution here: https://www.pluralsight.com/guides/defining-props-in-react-function-component-with-typescript – enk1 Sep 28 '20 at 09:50
  • 7
    I added update. This eslint rule has no sense for React + TS combinantion. – enk1 Sep 30 '20 at 07:25
  • Any comments on React.FC discouraged? https://github.com/facebook/create-react-app/pull/8177 – franchb Sep 29 '21 at 12:28
14

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

ricom
  • 143
  • 1
  • 7
  • I think it solved the problem because you are explicitly setting a default value with `greeting = 'Hi'` – Petruza Apr 28 '22 at 14:14
3

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

ricom
  • 143
  • 1
  • 7
arslan2012
  • 1,010
  • 7
  • 19
  • Whenever I use `?:` in props should to declare their default values explicitly with `defaultProps = {}`?, Other thing, the default value of the property is not passed in `gretting = 'night'`? – Cristian Flórez Sep 02 '20 at 06:30
  • yes, `react/require-default-props` does not consider your param defaults, it only checks defaultProps, in this case you could simply disable it – arslan2012 Sep 02 '20 at 06:37
  • I am not clear, should I disable the rule globally or just for this occasion? because disabling the rule whenever I need to use an optional prop(?:) is very inefficient... or better I should always set `myCompnent.defaultProps = {}` insted of param defaults? – Cristian Flórez Sep 02 '20 at 06:58
  • `defaultProps` is used for js. Typescript has another way to declare prop types – akim lyubchenko Apr 19 '21 at 12:18