0

Here is my file with two components that are supposed to conditionally render. The problem is right before I export I cannot use my variables from 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 && 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 && p === passadmin ? isLoggedIn : SignIn;
    
    export default exp;

This is just text because Stack Overflow Says I have too much code (IGNORE).

  • 1
    those are outside the react function, no? – Sinan Yaman Dec 26 '20 at 18:32
  • @Sinan Yaman they are outside is there still away to acess the variables from inside maybe with props? –  Dec 26 '20 at 18:40
  • What is the error exactly? Although, right off the bat, I don't think your usage of `isLoggedIn` is correct within the `SignIn` component. You are using it there as an event handler, but within the function it is a functional component. Furthermore, the conditional export of the two components also does seem odd. We definately need more information as to what you want it to do, and how it's behaving. – theJuls Dec 26 '20 at 19:32
  • @theJuls I ended up figuring it out I created a boolean and conditionally rendered inside one method, you should try it if you run into a case like this! –  Dec 26 '20 at 20:01

0 Answers0