Typescript: Using boolean type is not accepted by TS compiler

Question

Right now, I put isLoading to any, but if I put it to boolean (like I want it to be), it throws the following error when hovering over the "Loading" const. As far as I understand, this should be working. Very new to Typescript, so please be gentle. Any help would be appreciated.

package.json

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"typescript": "^4.0.3"

Error message

Type '{ ({ isLoading, size, color, }: LoadingProps): false | JSX.Element; defaultProps: Partial<LoadingProps> | undefined; }' is not assignable to type 'FC<LoadingProps>'.
  Type 'false | Element' is not assignable to type 'ReactElement<any, any> | null'.
    Type 'false' is not assignable to type 'ReactElement<any, any> | null'.ts(2322)

index.tsx

import React from 'react';
import ClipLoader from 'react-spinners/ClipLoader';

interface LoadingProps {
  isLoading: any;
  size?: number;
  color?: string;
}

/**
 * Loading icon to let user know a promise is going on
 *
 * @param isLoading Passing true to show spinner, and pass false to remove it
 * @param size react-spinner parameter for size of icon
 * @param color Color of Loading icon
 */

const Loading: React.FC<LoadingProps> = ({
  isLoading,
  size = 35,
  color = '#F6F7FB',
}: LoadingProps) => {
  return isLoading && <ClipLoader size={size} color={color} />;
};

Loading.defaultProps = {
  size: 35,
  color: '#F6F7FB',
};

export default Loading;

Jordi Nebot · Accepted Answer · 2021-03-15 18:20:47Z

4

When isLoading is false your return statement returns false, which is not a ReactElement.

I'd suggest always using a ternary for conditional rendering instead. Like:

return isLoading ? <ClipLoader size={size} color={color} /> : null

See Conditional Rendering in docs for more details.

answered Mar 15, 2021 at 18:20

Jordi Nebot

3,3973 gold badges32 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

drewkiimon Over a year ago

+1 This fixed it. I didn't think about if it was false. I did the null return and it made everything better. Thank you so much! Will mark as the accepted answer.

Collectives™ on Stack Overflow

Typescript: Using boolean type is not accepted by TS compiler

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related