Reactでログイン状態を元にヘッダーの表示を切り替えたいがなぜか条件式が機能していない

Question

実現したいこと

ログイン状態を元にヘッダーの表示を切り替えたい

発生している問題・分からないこと

Reactで条件式が機能していないです。
以下のコードで、console.logでは isAuthがfalseなのにもかかわらずログインが表示されない状態です。

該当のソースコード

import React from 'react'
import {Link} from "react-router-dom";

const Header = (isAuth) => {
  console.log(isAuth); //ここではfalseになっている
  return (
    <>
    <Link to="/">ホーム</Link>
    
    {!isAuth ? <Link to="/login">ログイン</Link> : <><Link to="/createconcept">新機能作成</Link>   <Link to="/logout">ログアウト</Link></>} //なぜかログインが表示されない

    </>
  )
}

export default Header

import './App.css';
import {BrowserRouter as Router, Routes, Route, Link} from "react-router-dom"
import Home from './components/Home';
import Logout from './components/Logout';
import Login from './components/Login';
import CreateConcept from './components/CreateConcept';
import Header from './components/Header';
import { useState } from 'react';

function App() {
  const [isAuth, setIsAuth] = false;

  return (
    <Router>
      <Header isAuth={isAuth}/>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/createconcept" element={<CreateConcept />}></Route>
        <Route path="/login" element={<Login setIsAuth={setIsAuth}/>}></Route>
        <Route path="/logout" element={<Logout setIsAuth={setIsAuth}/>}></Route>
      </Routes>
    </Router>
  );
}

export default App;

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

isAuthをTrueにする箇所(ログイン処理)にノータッチでもこの状況が発生します。
もちろんconsole.logではtrueになりますが、判定式だけが機能していないです。

補足

特になし

Answer 1

const [isAuth, setIsAuth] = false;

まず、こちらが間違っています。 false は分割代入を使って2つの値を取り出すことが不可能です。

const [isAuth, setIsAuth] = useState(false);

と書く必要があります。(useState が返す値が「2つの値を持つ配列」だから、このような書き方ができます)

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

https://ja.react.dev/learn/state-a-components-memory

---

const Header = (isAuth) => {

こちらも構文的な誤りがあります。

const Header = ({ isAuth }) =>
// 以下と同じ
// const Header = (props) => 
//   const isAuth = props.isAuth 

が正しいです。こちらについても引数リストにおける分割代入です。

https://ja.react.dev/learn/passing-props-to-a-component

Comments

[moST]

回答ありがとうございます。
試したところ問題が解決しました。
まだまだ勉強不足なことに気づきました
ベストアンサーに選ばせていただきました。