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

user_8582246 0
Viewed 23568

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

eslint typescript reactjs
3 Answers

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

user_67887830

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

user_50594010

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

user_46991950
Related