Reactでの&&の使い方について

Question

こちらのコード内の"&&"は論理演算子のように見えますが、変数isLoginと何を審理しているのでしょうか？

            {!isLogin && (
              <>
               <TextField
                  variant="outlined"
                  margin="normal"
                  required
                  fullWidth
                  id="username"
                  autoComplete="username"
                  value={username}
                  onChange={(e:React.ChangeElement<HTMLElement>)=>{
                    setUsername(e.target.value)
                  }}
                />
              </>
            )}

Answer 1

次のショットサーキット評価という性質を利用しています
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators

左辺!isLoginが真の場合、右辺が返り値となります
左辺!isLoginが偽の場合、falseが返り値となります（Reactのrender内ではfalseは表示されない性質を利用）

よって、左辺!isLoginが真の場合のみTextFieldが表示されます