This comparison appears to be unintentional because the types '{ loading: Boolean; }' and 'boolean' have no overlap

I am trying to set a loading state for my application with Typescript.

 const [loading,loadingupdate] = useState<Boolean>(false) 

 return ( { loading === true ? <></> : <> <div className={` ${skin} bigcontainer`}> <div className="main-consign"> <h1 className="labelauth">{label}</h1> <Meat label={label} model={model} passworderror={passworderror} emailerror={emailerror} usernameerror={usernameerror} username={usernameupdate} password={passwordupdate} email={emailupdate}/> <button className="submitsign" onClick={()=>{loadingupdate(!loading),submit()}}>Submit</button> <div className="linksign" onClick={()=>{label === authlabels.login ? navagate('/Signup') : navagate('/Login')}}>{label === authlabels.signup ? 'Aready SignedUP?' : 'No account?'}</div> </div> </div> </> } ); 

I wanted my code to show nothing when it equals false. When I press my signup button in the render it will fetch data and when the fetch responds it will change the boolean after it responds so it won't always equal to false.

like this:

 async function submit(){ if(label === authlabels.login){ console.log(`This is password: ${password} \n This is username: ${username}`) }else{ console.log(`This is email: ${email} \n This is password: ${password} \n This is username: ${username}`) const body:any = { email: email, password: password, username: username } const options: any = optionsMaker(body) await fetch(').then(response=>{ //console.log(response)// this is response from server, including all ok and error responses if(response.ok) setTimeout(()=>{ loadingupdate(!loading) },2000) else{ setTimeout(()=>{ console.log(`hi ${loading}`) loadingupdate(!loading) },2000) response.json().then((response)=>{console.log(response)}) } }) } } 

It also gives the error that my state will always be equal to false but it will change after the fetch typescript is wrong.

2 Answers

Well, you need to declare your state as boolean instead (primitive type, with lower case).

The essence of the problem:

return ({ loading === true ? <></> : something_else }) will result in an error because of extra { and }. To fix it, just remove the extra { and }, so the code is like return (loading === true ? <></> : something_else)

More explanation of the error message:

Usually, ({...}) is used to create an object, and ({loading}) is ok but ({ loading === true ? value1 : value2 }) is not ok. Usually, a parser will just give up and throw a SyntaxError here.

However, the Typescript Language Server of VSCode does not give up that easily. It still tries to infer the types of variables even if you miss a couple of ( or } (or have some extra).

It probably tried to check this instead: { loading } === true. Since your loading was obtained from useState<Boolean>, the left side is of type { loading: Boolean }, and the right side is of type boolean, hence the error message.