Error: Function component is not a function declaration

Question

I am using TextField of material UI as a component.

import { FieldProps, getIn } from "formik";
import React from "react";

export const FormTextField: React.FC<FieldProps & TextFieldProps> = ({
  error,
  helperText,
  field,
  form,
  ...rest
}) => {
  const isTouched = getIn(form.touched, field.name);
  const errorMessage = getIn(form.errors, field.name);

  return (
    <TextField
      variant="outlined"
      fullWidth
      error={error ?? Boolean(isTouched && errorMessage)}
      helperText={
        helperText ?? (isTouched && errorMessage ? errorMessage : undefined)
      }
      {...rest}
      {...field}
    />
  );
};

When I run the pnpm lint then it is throwing me this error:

Error: Function component is not a function declaration (react/function-component-definition)

I want to use this component but can't find any solution to resolve it. What could be its solution? Kindly help me. Thanks

Answer 1

Read the documentation for that linting rule: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md

It's telling you that it expects components to be declared as function declarations.

That means this:

export function FormTextField<FieldProps & TextFieldProps>({ //...

In fact, it look like this rule is automatically fixable. If you run pnpm lint --fix this will probably resolve itself.