Блог

Вот мой файл с двумя компонентами, которые должны отображаться условно. Проблема в том, что прямо перед экспортом я не могу использовать свои переменные из isLoggedIn (u, useradmin, p, passadmin).

 import React, { Fragment, useState } from "react";
import "./SignIn.css";
import { Link } from "react-router-dom";

const isLoggedIn = (user, pass) => {
    let u = user.toString();
    let p = pass.toString();
    let useradmin = "bilal";
    let passadmin = "123";
    console.log(u)
    console.log(p)
    if (u === useradmin amp;amp; p === passadmin) {
        console.log("success")
        return (
            <Fragment>
                <button type="button" className="btn btn-warning" data-toggle="modal">Head to Admin</button>
                <div className="modal fade">
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header">
                                <h4 className="modal-title text-dark">Successfully Signed In!</h4>
                                <button type="button" className="close" data-dismiss="modal" ></button>
                            </div>
                            <div className="modal-body">
                                <input type="text" className="form-control" />
                            </div>
                            <div className="modal-footer">
                                <Link to="/adminqueue">
                                    <button type="button" className="btn btn-danger" data-dismiss="modal">Enter Admin Queue</button>
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </Fragment>
        )
    }
}
const SignIn = () => {
    const [user, setUser] = useState('');
    const [pass, setPass] = useState('');

    return (
        <Fragment>
            <div className="login-box">
                <h1>Admin Log In</h1>
                <form>
                    <div className="textbox">
                        <i className="fas fa-user" />
                        <input onChange={event => setUser(event.target.value)} type="text" placeholder="Username" />
                    </div>
                    <div className="textbox">
                        <i className="fas fa-lock" />
                        <input onChange={event => setPass(event.target.value)} type="password" placeholder="Password" />
                    </div>
                    <button className="button" type="button" value="Sign in" onClick={() => isLoggedIn(user, pass)} >SignIn</button>
                </form>
            </div>
        </Fragment>
    )
    }

    const exp = u === useradmin amp;amp; p === passadmin ? isLoggedIn : SignIn;
    
    export default exp;
 

Это просто текст, потому что переполнение стека говорит, что у меня слишком много кода (ИГНОРИРОВАТЬ).