React 条件分岐を利用したログイン処理

成果物

今回作成したのは条件文(if)を利用したログイン処理です。
サーバーサイドは開発していないため、ユーザー名、パスワードは共に固定となります。
ユーザー名にuser、パスワードにpasswordと入力することでログインすることができます。
また、間違った入力を行うとエラーメッセージが表示される仕組みになっています。

コード

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

App.js

import React, { useState } from "react";

// 親コンポーネントであるLoginControlから関数「toggleIsLoggedOut」を受け取る
const LogoutButton = (props) => {
   
  // ログアウトボタンが押されたら関数「toggleIsLoggedOut」を実行する
  return <button onClick={props.toggleIsLoggedOut}>ログアウト</button>;
};

// 親コンポーネントであるLoginControlから関数「toggleIsLoggedIn」を受け取る
const LoginButton = (props) => {

  // ログインボタンが押されたら関数「toggleIsLoggedIn」を実行する    
  return <button onClick={props.toggleIsLoggedIn}>ログイン</button>;
};

const LoginControl = () => {

  // ユーザー名の状態変数「userName」とそれを変更する関数「setUserName」を設定
  const [userName, setUserName] = useState("");

  // パスワードの状態変数「password」とそれを変更する関数「setPassword」を設定
  const [password, setPassword] = useState("");

  // ログイン管理の状態変数「isLoggedIn」とそれを変更する関数「setIsLoggedIn」を設定
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // エラーメッセージの状態変数「errorMsg」とそれを変更する関数「setErrorMsg」を設定
  const [errorMsg, setErrorMsg] = useState(false);

  // ログインボタンが押された際に実行する関数「toggleIsLoggedIn」
  const toggleIsLoggedIn = () => {

    // ユーザー名に「user」、パスワードに「password」が入力された場合、ログイン管理の状態変数を変更する
    if (userName === "user" && password === "password") {
      setIsLoggedIn(true);

    // ログインに失敗した場合、エラーメッセージを表示するために関数「setErrorMsg」にtrueを設定する
    } else {
      setErrorMsg(true);
    }
  };

  // ログアウトボタンが押された際に実行する関数「toggleIsLoggedOut」
  const toggleIsLoggedOut = () => {

    // ログイン管理の状態変数を変更する
    setIsLoggedIn(false);
  };

  // ユーザー名が入力された際に実行される関数「handleUserName」
  // フォームに入力された内容をユーザー名の状態変数「userName」に設定する
  const handleUserName = (e) => setUserName(e.target.value);

  // パスワードが入力された際に実行される関数「handlePassword」
  // フォームに入力された内容をpasswordの状態変数「password」に設定する
  const handlePassword = (e) => setPassword(e.target.value);

  // ログイン状態の場合、LogoutButtonコンポーネントを呼び、関数「toggleIsLoggedOut」を渡す
  if (isLoggedIn) {
    return <LogoutButton toggleIsLoggedOut={toggleIsLoggedOut} />;
  }

  // ログインアウト状態の場合
  return (
    <>
      // errorMsgが true の場合、エラーメッセージを表示
      <p>{errorMsg && "ユーザー名またはパスワードが違います"}</p>
      <div>
        <label>ユーザー名: </label>
        // ユーザー名が入力されると関数「handleUseName」が実行される
        <input type="text" onChange={handleUserName} />
      </div>
      <div>
        <label>パスワード: </label>
        // パスワードが入力されると関数「hadlePassword」が実行される
        <input type="text" onChange={handlePassword} />
      </div>

      // LoginButtonコンポーネントを呼び、関数「toggleIsLoggedIn」を渡す
      <LoginButton toggleIsLoggedIn={toggleIsLoggedIn} />
    </>
  );
};

export default function App() {
  return <LoginControl />;
}

styles.css

特に記述はありません