Eslint-plugin-react: react/prop-types does not validate missing propTypes for functions in version 7.12.3

[Salles-FA]

@ljharb closed the issue #1958 with the v7.12.1 released and he suggested to open a new issue if the problem persists.

I have the same problem with both v7.11.1, v7.12.1 and recently updated v7.12.3. I'm providing a self-contained repro as follows (As you can see the MyInput class reports the "eslint is missing in props validation [react/prop-types]" and the MyTest class don't. It is the same .jsx file and the reason is because of the spread props {...formikProps} ):

import React, { Component } from 'react';
import { Col, FormFeedback, FormGroup, Input, Label } from 'reactstrap';

import { Formik, Form } from 'formik';
import * as Yup from 'yup';

const getVal = (obj, keys) => keys.split('.').reduce((o, k) => (o || {})[k], obj);

class MyInput extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render = () => {
        //#region This block of code reports [eslint] 'name' is missing in props validation [react/prop-types]
        const {
            className,
            disabled,
            errors,
            handleBlur,
            handleChange,
            id,
            label,
            maxLength,
            placeholder,
            touched,
            type,
            values,
            xs,
            sm,
            md,
            lg,
            xl,
            widths,
        } = this.props;
        //#endregion This block of code reports [eslint] 'name' is missing in props validation [react/prop-types]

        const value = getVal(values, id);
        const invalid = getVal(errors, id) && getVal(touched, id);

        return (
            <Col xs={xs} sm={sm} md={md} lg={lg} xl={xl} widths={widths}>
                <Label for={id}>{label}</Label>
                <Input
                    placeholder={placeholder}
                    maxLength={maxLength}
                    type={type || 'text'}
                    id={id}
                    name={id}
                    value={value || ''}
                    onChange={handleChange}
                    onBlur={handleBlur}
                    className={`form-control ${invalid && 'is-invalid'} ${className || ''}`}
                    disabled={(values && values.readOnly) || disabled}
                />
                <FormFeedback tooltip>{getVal(errors, id)}</FormFeedback>
            </Col>
        );
    };
}

export default class MyTest extends Component {
    constructor(props) {
        super(props);

        this.initialValues = {
            test: '',
        };

        this.validationSchema = Yup.object().shape({
            test: Yup.string().required(),
        });
    }

    render = () => (
        <Formik
            //#region This block of code DON'T report [eslint] is missing in props validation [react/prop-types]
            initialValues={this.props.initialValues || this.initialValues}
            validationSchema={this.props.validationSchema || this.validationSchema}
            //#endregion This block of code DON'T report [eslint] is missing in props validation [react/prop-types]
            validateOnChange={false}>
            {formikProps => (
                <Form>
                    <FormGroup row>
                        <MyInput
                            md="5"
                            id="test"
                            label="Test input"
                            placeholder="Test placeholder"
                            maxLength="10"
                            {...formikProps} //__and that's because of the spread props in this line__
                        />
                    </FormGroup>
                </Form>
            )}
        </Formik>
    );
}

My eslintrc.json

{
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "react-app",
        "plugin:prettier/recommended",
        "prettier/react",
        "prettier/standard"
    ],

    "env": {
        "es6": true,
        "browser": true
    },
    "rules": {
        "prettier/prettier": [
            "error",
            {
                "singleQuote": true,
                "printWidth": 120,
                "useTabs": true,
                "tabWidth": 4,
                "trailingComma": "all",
                "jsxBracketSameLine": true
            }
        ],
        "no-unused-vars": [
            "error",
            { "vars": "all", "args": "after-used", "caughtErrors": "all", "ignoreRestSiblings": false }
        ],
        "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "return" }],
        "lines-between-class-members": [2, "always"],
        "react/jsx-pascal-case": 0,
        "react/prop-types": [2, { "ignore": ["history"] }]
    }
}

[ljharb]

(On a side note, there's zero reason for render to be an arrow function in a class field; that should be an instance method)

I've added a test case that passes; that suggests this is fixed on master but not yet released. I'm happy to reopen if the next release doesn't fix it.

[ljharb]

v7.12.4 has been released.

[Salles-FA]

(On a side note, there's zero reason for render to be an arrow function in a class field; that should be an instance method)

I really appreciate it.

I've added a test case that passes; that suggests this is fixed on master but not yet released. I'm happy to reopen if the next release doesn't fix it.

Thank you! It's fixed now.

[johnarnfield]

Seems like this is still an issue in version 7.17.0

Prop types are not validated in a function component with a return of:

return (
    ordering.length > 0 && (
      <Paginator items={ordering} pageSize={10} />
    )
)

But are with a function component with a return of:

  if (ordering.length > 0) {
    return false;
  }

  return (
    <Paginator items={ordering} pageSize={10} />
  )