Skip to content

[Bug]: Properties faulty identified as not declared for types in react-hook-form #3741

Open
@fredrikcarlbom

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions