Type 'Element | undefined' is not assignable to type 'ReactElement<any, string | ((props: any)

Question

I have a component that looks like this. This version works perfectly:

export default function StatusMessage(isAdded: boolean, errorMessage: string) {
  if (isAdded) {
    return <ResultAlert severity="success" text="User Added" />;
  } else {
    if (errorMessage !== '') {
      if (
        errorMessage.includes('email')
      ) {
        return <ResultAlert severity="error" />;
      }
      if (
        errorMessage.includes('phone number')
      ) {
        return (
          <ResultAlert severity="error" text="" />
        );
      } 
    }
  }
}

Now, I am trying to change the way I export it. I am trying this:

type StatusMessageProps = {
  isAdded: boolean; 
  errorMessage: string;
}

export const StatusMessage: React.FunctionComponent<StatusMessageProps> = ({
  isAdded,
  errorMessage
}) => {

but i keep getting an error that:

Type '({ isAdded, errorMessage }: PropsWithChildren<StatusMessageProps>) => Element | undefined' is not assignable to type 'FunctionComponent<StatusMessageProps>'.
  Type 'Element | undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.
    Type 'undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.

I am using the same method on different pages but the error is only here

Edit:

I am using this component like this:

 const [isAdded, setIsAdded] = useState(false);

{isSubmitted && StatusMessage(isAdded, errorMessage)}

it gives me an error on isAdded that

Argument of type 'boolean' is not assignable to parameter of type 'PropsWithChildren<StatusMessageProps>'.ts(2345)

Shuffleboard

Answer 1

You must have forgotten return a value in your component. Are you forgetting return null since void 0 is unacceptable result of a React component?

export const StatusMessage: React.FunctionComponent<StatusMessageProps> = ({
  isAdded,
  errorMessage
}) => {
  if (isAdded) {
    return <ResultAlert severity="success" text="User Added" />;
  } else {
    if (errorMessage !== '') {
      if (
        errorMessage.includes('email')
      ) {
        return <ResultAlert severity="error" />;
      }
      if (
        errorMessage.includes('phone number')
      ) {
        return (
          <ResultAlert severity="error" text="" />
        );
      } 
    }

    // Here where you missed
    return null;
  }
}

Abdominous

What did you do as you tried to invoke your component StatusMessage(isAdded, errorMessage)? – Abdominous

calling a graphql query and setting values accordingly. added in the qs – Shuffleboard

it seems like you have a same name StatusMessage for both a function & a component. Can you check that then? – Abdominous

calling it like this worked <StatusMessage isAdded={isAdded} errorMessage={errorMessage}/> – Shuffleboard

Answer 2

In my case I had an auth wrapper component where a loading page component would be returned if the auth was loading or the user was unauthenticated otherwise the children props would be returned.

The issue was that I needed to wrap the children in empty html tags.

return <>{children}</>;

Density

What about this rule then? github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/… – Pneumatometer

Answer 3

in my case return null; didn't work so I return <></>;

Dakotadal