【React】三項演算子を使いボタンの表示、非表示を切り替える

はじめに

Reactの大きなメリットとしてstateによる状態管理があります。
さらにstateと三項演算子を使うことで不具合が発生しにくくシンプルにボタンなどの状態を変化させることができます。

今回は、React(JavaScript)の三項演算子を使ってボタンの表示、非表示を行う方法を紹介します。

三項演算子を利用する

三項演算子を利用することで簡単に値の判定を行うことができます。簡易的なif文の役割をします。
簡単な判定ではコードの視認性が高まる反面、複雑になると逆にコードの視認性を下げてしまう特徴があります。

    let a = 1;
    let b = 2;
    let c = true;

    let d = c ? a : b;
    console.log(d);
    // 1が出力される

    let a = 1;
    let b = 2;
    let c = false;

    let d = c ? a : b;
    console.log(d);
    // 2が出力される

三項演算子でボタンの表示、非表示を行う

Reactのコンポーネント内で利用する例を見てみましょう。
stateを三項演算子を組み合わせる事でシンプルにボタンの表示、非表示を行うことができます。
下記の例では、ボタンを押すと表示が制御され、OKボタン、キャンセルボタンが交互に表示されます。

もちろん、ボタン以外にも様々な要素を表示、非表示できるので汎用性は抜群です。

import { useState } from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import CheckIcon from "@mui/icons-material/Check";
import CancelIcon from "@mui/icons-material/Cancel";

function App() {
  const [toggle, setToggle] = useState(false);

  return (
    <Box m={3}>
      <Stack direction="row" spacing={1}>
        <Button
          sx={{ display: toggle ? "none" : "inhelit" }}
          variant="contained"
          color="secondary"
          endIcon={<CheckIcon />}
          onClick={() => {
            setToggle(true);
          }}
        >
          OK
        </Button>
        <Button
          sx={{ display: !toggle ? "none" : "inhelit" }}
          variant="contained"
          color="primary"
          endIcon={<CancelIcon />}
          onClick={() => {
            setToggle(false);
          }}
        >
          キャンセル
        </Button>
      </Stack>
    </Box>
  );
}

export default App;