react/forbid-foreign-prop-types warning for static reference to current class

[ehaynes99]

Referencing the propTypes object of the current class causes this warning:

Using propTypes from another component is not safe because they may be removed in production builds

I've used this pattern in numerous places to effectively say, "pass all props but those I handle":

import React from 'react'
import { object, string } from 'prop-types'
import { omit } from 'lodash'

class Wrapper extends React.Component {
  static propTypes = {
    className: string,
    style: string,
  }
  
  render() {
    // pass everything except className and title to child component
    const childProps = omit(this.props, Object.keys(Wrapper.propTypes))
    return (
      <div className={this.props.className} style={this.props.style}>
        <div {...childProps}>
          Inner content
        </div>
      </div>
    )
  }
}

Is this a false positive, or is the reason for this warning still applicable when the "other" component is actually the same component? I imagine it comes down to whether Webpack/babel plugins strip it blindly, or somehow creates a closure over it if referenced within the same class. If the latter, perhaps the message could be tweaked a bit to suggest that any static reference is not safe.

I know I can use rest/spread to filter the list, but when the list is large, I've found this to be a nice alternative to a bunch of repetition.

[ljharb]

It's not a false positive; the intention is to only use the propTypes if they're explicitly exported, so that they can be safely stripped out in production.

The best approach is likely explicit repetition, or else overriding the rule in this instance.

Are you using a babel plugin to strip propTypes in production?

[csantos1113]

This must be a valid case:

const space = () => {};
space.propTypes = {
    name: PropTypes.string
};

export default class List extends PureComponent {
  static propTypes = {
    ...space.propTypes, // but I'm getting the warning here!
    message: PropTypes.string
  }

  render() {
     return <div>{this.props.message}</div>
  }
}

[ljharb]

@csantos1113 You’re looking for the allowInPropTypes option, released in v7.7.

[ljharb]

Fixed by #2040.