Eslint: Problem with default props in functional component (Typescript - React)

Question

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

Props are declared as nombre, saludo, but deconstructed as name, gretting.Is that code really what you have? Because that's not going to work. — Alex Wayne
– Alex Wayne, Commented Sep 1, 2020 at 23:51

enk1 · Accepted Answer · 2020-10-21 11:28:47Z

36

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

edited Oct 21, 2020 at 11:28

answered Sep 24, 2020 at 7:09

enk1

5873 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Cristian Flórez Over a year ago

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?

enk1 Over a year ago

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: pluralsight.com/guides/…

enk1 Over a year ago

I added update. This eslint rule has no sense for React + TS combinantion.

franchb Over a year ago

Any comments on React.FC discouraged? github.com/facebook/create-react-app/pull/8177

ricom · Accepted Answer · 2021-05-21 04:31:12Z

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

answered May 21, 2021 at 4:31

ricom

1431 silver badge7 bronze badges

1 Comment

Petruza Over a year ago

I think it solved the problem because you are explicitly setting a default value with greeting = 'Hi'

ricom · Accepted Answer · 2021-05-22 09:36:27Z

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

edited May 22, 2021 at 9:36

ricom

1431 silver badge7 bronze badges

answered Sep 2, 2020 at 2:55

arslan2012

1,0287 silver badges20 bronze badges

4 Comments

Cristian Flórez Over a year ago

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

arslan2012 Over a year ago

yes, react/require-default-props does not consider your param defaults, it only checks defaultProps, in this case you could simply disable it

Cristian Flórez Over a year ago

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?

akim lyubchenko Over a year ago

defaultProps is used for js. Typescript has another way to declare prop types

Collectives™ on Stack Overflow

Eslint: Problem with default props in functional component (Typescript - React)

What I have

Problem

3 Answers 3

4 Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

What I have

Problem

3 Answers 3

4 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related