Closed
Description
@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"] }]
}
}