javascript - Error: Function component is not a function declaration - Stack Overflow

admin管理员组

文章数量:1287145

I am using TextField of material UI as a ponent.

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 ponent is not a function declaration (react/function-ponent-definition)

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

I am using TextField of material UI as a ponent.

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 ponent is not a function declaration (react/function-ponent-definition)

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

• javascript
• reactjs
• typescript
• next.js

Share Improve this question Follow asked Sep 15, 2022 at 17:44 JohnJohn 32311 gold badge33 silver badges1010 bronze badges 3

• did you try declaring the parameter in a var statement? – Hogan Commented Sep 15, 2022 at 17:49
• error is ing due to function ponent. var doesn't work for it. – John Commented Sep 15, 2022 at 17:50
• make it function declaration, export function FormTextField(...){...} – norbekoff Commented Sep 15, 2022 at 17:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

It's telling you that it expects ponents 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.

本文标签： javascriptError Function component is not a function declarationStack Overflow