How is it possible that an expression evaluates to true with a false condition coming from sessionStorage?

Question

I am trying to render 'Loading...' as a user awaits the Firebase sign in with Google feature to fully complete.

I am trying to conditionally render something only if the variable evaluates to true, but at this time it is rendering even though it evaluates to false (I am logging it to the console to check it)

if (!sessionStorage.getItem('isLoading')) sessionStorage.setItem('isLoading', false)

const loadingFromSessionStorage = sessionStorage.getItem('isLoading') 
console.log('loadingFromSessionStorage: ', loadingFromSessionStorage) //false

useEffect(() => {
    auth
      .getRedirectResult()
      .then(function (result) {
        if (result.credential) {
          sessionStorage.setItem('isLoading', false)
        }
      })
      .catch(function (error) {
        var errorMessage = error.message
      })
  }, [])

  function handleSignInWithGoogle() {
    sessionStorage.setItem('isLoading', true)
    signInWithGoogle()
  }

  return (
    loadingFromSessionStorage ? ( //this is false, but 'Loading' will *NOT* show.
      <div> 
          //...
      </div>
    ) : ( <h3> Loading ... </h3> )

Even when I tried to use && it would still render the div

//it will show the div, even though loadingFromSessionStorage is false.
return ( loadingFromSessionStorage && <div> content </div> )

Session storage always stores **strings**. The string `"false"` evaluates to `true` when tested as a boolean because it's not the empty string. — Pointy, May 06 '20 at 14:29

score 2 · Accepted Answer · answered May 06 '20 at 14:34

This is because the sessionStorage.getItem('isLoading') returns "false" which is a String, not a Boolean.

In JavaScript, a non-empty String is rendered True

Modify your code like so:

const loadingFromSessionStorage = Boolean(sessionStorage.getItem('isLoading'))

How is it possible that an expression evaluates to true with a false condition coming from sessionStorage?

1 Answers1