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)
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) {}
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;
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;
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)