react error -Type 'boolean' is not assignable to type 'ReactElement'

 

The error popping up due to this line of code here which will - as typescript indicated returns boolean or jsx element. 

{isAuthenticated && (

      <div>

        <img src={user!.picture} alt={user!.name} />

        <h2>{user!.name}</h2>

        <p>{user!.email}</p>

      </div>

    )

To resolve this - thanks to this link here.

I use react fragment approach - which i deem to be easier.

 return (        

    <>{isAuthenticated && (

      <div>

        <img src={user!.picture} alt={user!.name} />

        <h2>{user!.name}</h2>

        <p>{user!.email}</p>

      </div>

    )}</>

  );