Why is this an issue?

React Legacy APIs provide a way to define the default values for props and check the prop types at runtime. This rule verifies if a defaultProps definition does have a corresponding propTypes definition. If it is missing, this could be the result of errors in refactoring or a spelling mistake.

It is also an error if a defaultProp has propType that is marked as isRequired.

How to fix it in PropTypes

function MyComponent({foo, bar}) {
  return <div>{foo}{bar}</div>;
}

MyComponent.propTypes = {
  foo: React.PropTypes.string.isRequired,
};

MyComponent.defaultProps = {
  foo: "foo", // Noncompliant: foo is a required prop
  bar: "bar", // Noncompliant: bar propType is missing
};

To fix the issue, verify that each defaultProp has a corresponding propType definition and is not marked as isRequired.

function MyComponent({foo, bar}) {
  return <div>{foo}{bar}</div>;
}

MyComponent.propTypes = {
  foo: React.PropTypes.string,
  bar: React.PropTypes.string,
};

MyComponent.defaultProps = {
  foo: "foo",
  bar: "bar",
};

How to fix it in TypeScript

type Props = {
  foo: string,
  bar?: string
}

function MyComponent({foo, bar}: Props) {
  return <div>{foo}{bar}</div>;
}

MyComponent.defaultProps = {
  foo: "foo", // Noncompliant: foo is a required prop
  bar: "bar",
};

To fix the issue, verify that each defaultProp has a corresponding type definition and is marked as optional.

type Props = {
  foo?: string,
  bar?: string
}

function MyComponent({foo, bar}: Props) {
  return <div>{foo}{bar}</div>;
}

MyComponent.defaultProps = {
  foo: "foo",
  bar: "bar",
};

Resources

Documentation