project-codepen/src/pages/LoginForm.js

import { useState } from "react";
import "./LoginReg.css";

export const LoginForm = ({ onLogin }) => {
  const [login, setLogin] = useState("");
  const [password, setPassword] = useState("");
  return (
    <div className="login">
      <h3>Login</h3>
      <input
        className="u"
        type="login"
        placeholder="Username"
        value={login}
        onChange={(e) => setLogin(e.target.value)}
      />
      <input
        className="p"
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button
        type="submit"
        className="btn btn-primary btn-block btn-large"
        disabled={!login || !password}
        onClick={() => onLogin(login, password)}
      >
        Let me in.{" "}
      </button>
      <button className="main_page">
        <a href="/">Main page</a>
      </button>
    </div>
  );
};