NextJS[React]における、条件付きレンダリング[三項演算子]でfalseが再現されない件について

前提・実現したいこと

NextJS[TailWindCSS利用]にて、SPAを作成しています。
解決したい点は、現在ヘッダーメニューを作成し、ハンバーガーメニューを実装する為、コンポーネントを細かく分けて開発していますが、Reactのstate機能を使い、ハンバーガーメニューをクリックすると、onClickでイベントを着火、stateをfalse=trueと反転させて表示を変える内容につき、三項演算子でコーディングしています。

発生している問題・エラーメッセージ

下記コードのような実装をしています。
このコンポーネントは、ハンバーガーメニューの「2本線」と「✕」だけを再現する部品としていて、他に親コンポーネントがいるので、"props.setOpenMenu”を用いています。
コードの可視性を良くするため、あえてここでは"const clickValue"としてpropsの値を設定しました。

ハンバーガーメニューをクリックすることでイベントを着火させるのですが、ブラウザのdevツール（Reactのdevツール）でstateを確認すると、false=trueの変化は確認できるのですが、三項演算子がうまく機能していないようで、ハンバーガーメニューの表示が変化されません。
三項演算子の記法が間違えているのか、そもそもの実装方法に難があるのか、解決策やヒントがあればご教示ください。

該当のソースコード

react
1function Hamburger (props) {
2  const clickValue = () => {
3    props.setOpenMenu(!"")
4  };
5
6  return (
7    <div onClick={clickValue}>
8      {clickValue ? (
9        <div>
10          <span className="absolute h-0.5 w-5 bg-black"></span>
11          <span className="absolute mt-1 h-0.5 w-5 bg-black"></span>
12        </div>
13      ):(
14        <div>
15          <span className="absolute transform rotate-45 mt-0.5 h-0.5 w-5 bg-black"></span>
16          <span className="absolute transform -rotate-45 mt-0.5 h-0.5 w-5 bg-black"></span>
17        </div>
18      )
19      }
20    </div>
21  )
22}
23
24export default Hamburger

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

NextJS (React)
TypeScript
TailWindCSS

行動規範の内容に同意します

回答1件

ベストアンサー

変数clickValueは関数が代入されています。関数はifや3項演算子などの条件式では常にtrueとして取り扱われます。

実際に確認してみましょう。下記のプログラムはどちらが表示されるか確認してみてください。

javascript
1const clickValue = () => {
2    props.setOpenMenu(!"")
3};
4console.log(typeof clickValue) // functionとなると思います
5if (clickValue) {
6    console.log('trueとみなされました ')
7} else {
8    console.log('falseとみなされました ')
9}

さて、clickValueは常にtrueと解釈されるため、３項演算はどんな状況でも

react
1<div>
2  <span className="absolute h-0.5 w-5 bg-black"></span>
3  <span className="absolute mt-1 h-0.5 w-5 bg-black"></span>
4</div>

を返却するわけです。これが見た目が変わらない理由の１番の原因です。

そして、実は他にも問題があります。clickValueの中にある

javascript
1props.setOpenMenu(!"")

について、空文字はfalseとして取り扱われるので、それの否定である!""は常にtrueになります。なのでsetOpenMenuの引数には常にtrueがセットされます。

ここまでを踏まえてどう実装するのか？素直にuseStateを使って状態を管理すればいい気がします。下記、実装例です。

react
1function Hamburger (props) {
2  const [menuState, setMenuState] = useState(false)
3  const clickValue = () => {
4    const newState = !menuState // 状態を反転させる
5    setMenuState(newState) // 状態を更新 (これでHamburgerコンポーネントの再描画が行われる)
6    if (props.setOpenMenu) {
7        props.setOpenMenu(newState) // 親コンポーネントに値を渡す
8    }
9  };
10  return (
11    <div onClick={clickValue}>
12      {menuState ? (
13        <div>
14          <span className="absolute h-0.5 w-5 bg-black"></span>
15          <span className="absolute mt-1 h-0.5 w-5 bg-black"></span>
16        </div>
17      ):(
18        <div>
19          <span className="absolute transform rotate-45 mt-0.5 h-0.5 w-5 bg-black"></span>
20          <span className="absolute transform -rotate-45 mt-0.5 h-0.5 w-5 bg-black"></span>
21        </div>
22      )
23      }
24    </div>
25  )
26}