HW/final_project/src/pages/RegisterPage.jsx

import { useState } from 'react';
import {  Link } from 'react-router-dom';
import { history } from '../App';
import '../App.css';

export const RegisterPage = ({ onRegister }) => {
    const [loginReg, setLoginReg] = useState("");
    const [passwordReg, setPasswordReg] = useState("");

    const Registration = () => {
        onRegister(loginReg, passwordReg)
        setLoginReg('')
        setPasswordReg('')
    }

    return (
        <div className="formBlock">

            <h1>Регистрация</h1>
            <div className="mb-3">
                <label htmlFor="exampleInputEmail1" className="form-label">Enter Login</label>
                <input
                    type="text"
                    value={loginReg}
                    onChange={(e) => setLoginReg(e.target.value)}
                    className="form-control"
                    id="exampleInputEmail1"
                    aria-describedby="emailHelp" />
            </div>
            <div className="mb-3">
                <label htmlFor="exampleInputPassword1" className="form-label">Enter Password</label>
                <input
                    type="password"
                    value={passwordReg}
                    onChange={(e) => setPasswordReg(e.target.value)}
                    className="form-control"
                    id="exampleInputPassword1" />
            </div>

            <div className="mb-3">
                <button type="submit" className="btn btn-primary" onClick={Registration}>Зарегистрироваться</button>
            </div>

            <Link to="/login">Я уже зарегистрирован</Link>
        </div>
    )
}