-
- Notifications
You must be signed in to change notification settings - Fork 2.8k
Open
Labels
Description
Is there an existing issue for this?
- I have searched the existing issues and my issue is unique
- My issue appears in the command-line and not only in the text editor
Description Overview
Lint returns errors for types from react-hook-form
Example of problematic code
import React from 'react' import { Controller, useForm } from 'react-hook-form' import { TextField } from '@mui/material' interface IFormTestProps { number: number } const FormTest = () => { const { control, register } = useForm<IFormTestProps>({}) return ( <form> <Controller name="number" control={control} render={(props) => { console.log(props.field.ref) return ( <TextField label="Number" type="number" {...register('number')} onChange={(e) => { // This is what we want to do props.field.onChange(parseInt(e.target.value, 10)) }} /> ) }} /> </form> ) } export default FormTest
Lint error
> npm run lint ... c:\...\FormTest.tsx 17:39 error 'field' is missing in props validation react/prop-types 17:45 error 'field.ref' is missing in props validation react/prop-types 25:39 error 'field' is missing in props validation react/prop-types 25:45 error 'field.onChange' is missing in props validation react/prop-types
I believe these are the relevant dependencies
{ "devDependencies": { "@types/react": "18.2.79", "@types/react-dom": "18.2.25", "@typescript-eslint/eslint-plugin": "7.7.0", "@typescript-eslint/parser": "7.7.0", "eslint": "8.57.0", "eslint-plugin-import": "2.29.1", "eslint-plugin-react": "7.34.1", "eslint-plugin-react-hooks": "4.6.0", "typescript": "5.4.5" }, "dependencies": { "@mui/material": "5.15.15", "react": "18.2.0", "react-dom": "18.2.0" }, "scripts": { "lint": "eslint src --cache --ext .ts,.tsx,.snap" }, }
Expected Behavior
I expected that eslint-plugin-react would detect imported types correctly and not report these errors.
eslint-plugin-react version
v7.34.1
eslint version
v8.57.0
node version
v20.10.0