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} />
  )