DEV Community

Andy Allison
Andy Allison

Posted on

REACT - Function component is not a function declaration

Ok so this one got me scratching my head for a while. After a recent update on some packages I started geting the following error

ESLint: Function component is not a function declaration (react/function-component-definition)
Enter fullscreen mode Exit fullscreen mode

On just about all of my components. My Components mostly look like the below code and the following example shows how it was fixed.

TLDR version

// Turn this 
const ActionButton: React.FC<ActionButtonProps> = (props) => { }

// into 
function ActionButton(props: ActionButtonProps) {}
Enter fullscreen mode Exit fullscreen mode
import { Box, Button, CircularProgress } from '@mui/material';
import React, { MouseEventHandler, ReactChild, ReactChildren } from 'react';
import { useAppSelector } from '../../../store/hooks';

export interface ActionButtonProps {
  /**
   * Checks if the button should be disabled
   */
  isDisabled: boolean;
  /**
   * Determines if the component is submitting. Results in disabled and spinner
   */
  isSubmitting: boolean;
  /**
   * Children to be displayed in the button
   */
  children: string | ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
  /**
   * Function for clicking
   */
  onClick?: MouseEventHandler<any> | undefined;
  /**
   * The Type of button it is Reset, Button, Submit
   */
  type?: 'button' | 'submit' | 'reset' | undefined;
  /**
   * The type of button to be used
   * one of 'outlined' | 'text' | 'contained'
   */
  variant?: 'outlined' | 'text' | 'contained';
  /**
   * Determines if the spinner is to be shown or not.
   * @type {boolean}
   */
  showSpinner?: boolean;
  /**
   * Determines if the button is full width or not.
   * @type {boolean}
   */
  fullWidth?: boolean;
}

const ActionButton: React.FC<ActionButtonProps> = ({
  isDisabled = false,
  children,
  onClick = undefined,
  variant = 'contained',
  showSpinner = false,
  isSubmitting = false,
  type = 'submit',
  fullWidth = false,
}) => {
  const darkMode = useAppSelector((state) => state.darkMode);
  return (
    <Button
      disabled={isDisabled || isSubmitting}
      onClick={onClick}
      variant={variant}
      type={type}
      fullWidth={fullWidth}
    >
      {(showSpinner || isSubmitting)
      && (
        <Box sx={{ mr: 2 }}>
          <CircularProgress
            aria-describedby="submit-button"
            size={12}
            sx={{ color: darkMode ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)' }}
          />
        </Box>

      )}
      {children}
    </Button>
  );
}

export default ActionButton;
Enter fullscreen mode Exit fullscreen mode

After reading lots of different articles and trying a few things this has now become.

import { Box, Button, CircularProgress } from '@mui/material';
import React, { MouseEventHandler, ReactChild, ReactChildren } from 'react';
import { useAppSelector } from '../../../store/hooks';

export interface ActionButtonProps {
  /**
   * Checks if the button should be disabled
   */
  isDisabled: boolean;
  /**
   * Determines if the component is submitting. Results in disabled and spinner
   */
  isSubmitting: boolean;
  /**
   * Children to be displayed in the button
   */
  children: string | ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
  /**
   * Function for clicking
   */
  onClick?: MouseEventHandler<any> | undefined;
  /**
   * The Type of button it is Reset, Button, Submit
   */
  type?: 'button' | 'submit' | 'reset' | undefined;
  /**
   * The type of button to be used
   * one of 'outlined' | 'text' | 'contained'
   */
  variant?: 'outlined' | 'text' | 'contained';
  /**
   * Determines if the spinner is to be shown or not.
   * @type {boolean}
   */
  showSpinner?: boolean;
  /**
   * Determines if the button is full width or not.
   * @type {boolean}
   */
  fullWidth?: boolean;
}

function ActionButton({
  isDisabled = false,
  children,
  onClick = undefined,
  variant = 'contained',
  showSpinner = false,
  isSubmitting = false,
  type = 'submit',
  fullWidth = false,
}: ActionButtonProps) {
  const darkMode = useAppSelector((state) => state.darkMode);
  return (
    <Button
      disabled={isDisabled || isSubmitting}
      onClick={onClick}
      variant={variant}
      type={type}
      fullWidth={fullWidth}
    >
      {(showSpinner || isSubmitting)
      && (
        <Box sx={{ mr: 2 }}>
          <CircularProgress
            aria-describedby="submit-button"
            size={12}
            sx={{ color: darkMode ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)' }}
          />
        </Box>

      )}
      {children}
    </Button>
  );
}

export default ActionButton;
Enter fullscreen mode Exit fullscreen mode

references

https://eslint.org/docs/rules/func-names
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md

Top comments (0)