CODEWITHSUNDEEP
reactjstypescriptstate
user21631563
user21631563

Reputation:

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 ? navigate('/Signup') : navigate('/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('http://localhost:5000/signUp', options).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) })

      }
    })
  }
}

I get an error that my state will always be equal to false but it will change after the fetch typescript is wrong.

Upvotes: 8

Views: 57362

Answers (3)

Rollersteaam
Rollersteaam

Reputation: 21

For anyone who runs into this answer because they're using enums, checking if an enum variable is truthy before checking what its value matches will cause this issue because the first value in your enum is 0 by default, which is a falsy value.

Upvotes: 0

qrsngky
qrsngky

Reputation: 2916

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.

Upvotes: 4

Emanuele Scarabattoli
Emanuele Scarabattoli

Reputation: 4489

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

Upvotes: 3

Related Questions