Type 'boolean' is not assignable to type 'ReactElement<any, any>'

Question

Please can someone explain how to fix error that TS throws: Type 'boolean' is not assignable to type 'ReactElement<any, any>'. In my code i want to show <Confetti/> component depending on isCorrect value. If var has falsy value i need nothing to render. How to make this type of logic correctly?

import React, { FC } from 'react'
import ReactConfetti from 'react-confetti';
import { useWindowSize } from 'react-use';

interface ConfettiProps {
    isCorrect: boolean;
}

interface WindowDimensions {
    width: number;
    height: number;
  }

const Confetti: FC<ConfettiProps> = ({isCorrect}) => {
    const { width, height }: WindowDimensions = useWindowSize();

  return (
    isCorrect && (<ReactConfetti width={width} height={height}/> )
  )
}

export default Confetti; 

Answer 1

Two options:

return (
  isCorrect ? (<ReactConfetti width={width} height={height}/> ) : null
)

return (
  <>{isCorrect && (<ReactConfetti width={width} height={height}/> )}</>
)

<></> is a react framgment

Answer 2

I had this error because I was using a .ts, not a .tsx file. So if you're using a ts file, change the extension to .tsx. I hope this helps!