Cannot render third react component using conditional rendering

Question

import React, { useState } from 'react'


const LoginPage = () => {

    const [isLogin, setIsLogin] = useState(true);
    const [isSignUp, setIsSignUp] = useState(true);
    const [isAdmin, setIsAdmin] = useState(true);

    // const [loginEmail, setLoginEmail] = useState("");
    // const [loginPassword, setLoginPassword] = useState("");

    // const [registerEmail, setRegisterEmail] = useState("");
    // const [registerPassword, setRegisterPassword] = useState("");
    // const [registerName, setRegisterName] = useState("");

    
    const LoginForm = () => {
        return (
            <div className="bg-white rounded-2xl shadow-2xl flex flex-col w-full md:w-1/3 items-center max-w-4xl transition duration-1000 ease-out">
                <h2 className='p-3 text-3xl font-bold text-pink-400'>Jupiter Review Hub</h2>
                <div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
                <h3 className='text-xl font-semibold text-blue-400 pt-2'>Log in</h3>

                {/* Inputs */}
                <div className='flex flex-col items-center justify-center'>
                    <input type='email' className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Email'></input>
                    <input type="password" className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Password'></input>
                    <button className='rounded-2xl m-2 text-white bg-blue-400 w-2/5 px-4 py-2 shadow-md hover:text-blue-400 hover:bg-white transition duration-200 ease-in'>
                        Log in
                    </button>
                </div>
                <div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
                <p className='text-blue-400 mt-4 text-sm'>Don't have an account?</p>
                <p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => setIsLogin(false) && setIsSignUp(true)}>Register here</p>
                <p className='text-blue-400 mt-4 text-sm'>OR</p>
                <p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => setIsLogin(false) && setIsAdmin(true) && setIsSignUp(false) }>Login as an Admin</p>

            </div>
        )
    }

    const SignUpForm = () => {
        return (
            <div className="bg-blue-400 text-white rounded-2xl shadow-2xl  flex flex-col w-full  md:w-1/3 items-center max-w-4xl transition duration-1000 ease-in">
                <h2 className='p-3 text-3xl font-bold text-white'>Jupiter Review Hub</h2>
                <div className="inline-block border-[1px] justify-center w-20 border-white border-solid"></div>
                <h3 className='text-xl font-semibold text-white pt-2'>Create account</h3>

                {/* Inputs */}
                <div className='flex flex-col items-center justify-center mt-2'>
                    <input type="text" className='rounded-2xl px-2 py-1 w-4/5   text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Name'></input>
                    <input type='email' className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Email'></input>
                    <input type="password" className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Password'></input>
                    <button className='rounded-2xl m-4 text-blue-400 bg-white w-3/5 px-4 py-2 shadow-md hover:text-white hover:bg-blue-400 transition duration-200 ease-in'>
                        Register
                    </button>
                </div>
                <div className="inline-block border-[1px] justify-center w-20 border-white border-solid"></div>
                <p className='text-white mt-4 text-sm'>Already have an account?</p>
                <p className='text-white mb-4 text-sm font-medium cursor-pointer' onClick={() => setIsLogin(true)}>Click here to Log in</p>
            </div>
        )
    }
    const AdminLoginForm = () => {
        return (
            <div className="bg-white rounded-2xl shadow-2xl flex flex-col w-full md:w-1/3 items-center max-w-4xl transition duration-1000 ease-out">
                <h2 className='p-3 text-3xl font-bold text-pink-400'>Jupiter Review Hub</h2>
                <div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
                <h3 className='text-xl font-semibold text-blue-400 pt-2'>Admin Log in</h3>

                {/* Inputs */}
                <div className='flex flex-col items-center justify-center'>
                    <input type='email' className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Email'></input>
                    <input type="password" className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Password'></input>
                    <button className='rounded-2xl m-2 text-white bg-blue-400 w-2/5 px-4 py-2 shadow-md hover:text-blue-400 hover:bg-white transition duration-200 ease-in'>
                        Log in
                    </button>
                </div>
                <div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
                <p className='text-blue-400 mt-4 text-sm'>Don't have an account?</p>
                <p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => setIsAdmin(false) && setIsLogin(false)  && setIsSignUp(true)}>Register here</p>
            </div>
        )
    }

    return (
        <div className="bg-gray-100 flex flex-col items-center justify-center min-h-screen md:py-2">
            <main className="flex items-center w-full px-2 md:px-20">
                <div className="hidden md:inline-flex flex-col flex-1 space-y-1">
                    <p className='text-6xl text-blue-500 font-bold'>Jupiter Review Hub</p>
                    <p className='font-medium text-lg leading-1 text-pink-400'>Your voice matters - Rate your Jupiter hostel stay with | Jupiter Review Hub |</p>
                </div>

                {/* {isLogin && <LoginForm />}
                {isAdmin && <AdminLoginForm />}
                {isSignUp && <SignUpForm />} */}
                {
                    isLogin ? (
                        <LoginForm />
                    ) : (
                        isSignUp ? (
                            <SignUpForm />
                        ) : (
                            isAdmin ? (
                                <AdminLoginForm />
                            ) : null
                        )
                    )
                }


            </main>
        </div>
    )
}

export default LoginPage

In this code when i try to "Login as admin" it going to Signup page...and no errors showing on, can anyone please help me with this, coz im stuck with this issue for two days.

Mehmet Önder · Accepted Answer · 2023-03-27 04:40:45Z

The below code works, but you should not use p elements for clicking. Using a or button would be better.

import React, {useState} from 'react'

const signupStates = {
  login: "login",
  signup: "signup",
  adminLogin: "adminLogin"
}

const LoginPage = () => {
  const [signupState, setSignupState] = useState(signupStates.login);

  const LoginForm = () => {
    return (
      <div className="bg-white rounded-2xl shadow-2xl flex flex-col w-full md:w-1/3 items-center max-w-4xl transition duration-1000 ease-out">
        <h2 className='p-3 text-3xl font-bold text-pink-400'>Jupiter Review Hub</h2>
        <div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
        <h3 className='text-xl font-semibold text-blue-400 pt-2'>Log in</h3>

        {/* Inputs */}
        <div className='flex flex-col items-center justify-center'>
          <input type='email' className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Email'></input>
          <input type="password" className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Password'></input>
          <button className='rounded-2xl m-2 text-white bg-blue-400 w-2/5 px-4 py-2 shadow-md hover:text-blue-400 hover:bg-white transition duration-200 ease-in'>
            Log in
          </button>
        </div>
        <div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
        <p className='text-blue-400 mt-4 text-sm'>Don't have an account?</p>
        <p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => setSignupState(signupStates.signup)}>Register here</p>
        <p className='text-blue-400 mt-4 text-sm'>OR</p>
        <p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => setSignupState(signupStates.adminLogin)}>Login as an Admin</p>

      </div>
    )
  }

  const SignUpForm = () => {
    return (
      <div className="bg-blue-400 text-white rounded-2xl shadow-2xl  flex flex-col w-full  md:w-1/3 items-center max-w-4xl transition duration-1000 ease-in">
        <h2 className='p-3 text-3xl font-bold text-white'>Jupiter Review Hub</h2>
        <div className="inline-block border-[1px] justify-center w-20 border-white border-solid"></div>
        <h3 className='text-xl font-semibold text-white pt-2'>Create account</h3>

        {/* Inputs */}
        <div className='flex flex-col items-center justify-center mt-2'>
          <input type="text" className='rounded-2xl px-2 py-1 w-4/5   text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Name'></input>
          <input type='email' className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Email'></input>
          <input type="password" className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Password'></input>
          <button className='rounded-2xl m-4 text-blue-400 bg-white w-3/5 px-4 py-2 shadow-md hover:text-white hover:bg-blue-400 transition duration-200 ease-in'>
            Register
          </button>
        </div>
        <div className="inline-block border-[1px] justify-center w-20 border-white border-solid"></div>
        <p className='text-white mt-4 text-sm'>Already have an account?</p>
        <p className='text-white mb-4 text-sm font-medium cursor-pointer' onClick={() => setSignupState(signupStates.login)}>Click here to Log in</p>
      </div>
    )
  }
  const AdminLoginForm = () => {
    return (
      <div className="bg-white rounded-2xl shadow-2xl flex flex-col w-full md:w-1/3 items-center max-w-4xl transition duration-1000 ease-out">
        <h2 className='p-3 text-3xl font-bold text-pink-400'>Jupiter Review Hub</h2>
        <div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
        <h3 className='text-xl font-semibold text-blue-400 pt-2'>Admin Log in</h3>

        {/* Inputs */}
        <div className='flex flex-col items-center justify-center'>
          <input type='email' className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Email'></input>
          <input type="password" className='rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0' placeholder='Password'></input>
          <button className='rounded-2xl m-2 text-white bg-blue-400 w-2/5 px-4 py-2 shadow-md hover:text-blue-400 hover:bg-white transition duration-200 ease-in'>
            Log in
          </button>
        </div>
        <div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
        <p className='text-blue-400 mt-4 text-sm'>Don't have an account?</p>
        <p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => setSignupState(signupStates.signup)}>Register here</p>
      </div>
    )
  }
  
  const UserAuth = () => {
    if (signupState === signupStates.login) {
      return <LoginForm />
    }
    
    if (signupState === signupStates.signup) {
      return <SignUpForm />
    }
    
    if (signupState === signupStates.adminLogin) {
      return <AdminLoginForm />
    }

    return null;
  }

  return (
    <div className="bg-gray-100 flex flex-col items-center justify-center min-h-screen md:py-2">
      <main className="flex items-center w-full px-2 md:px-20">
        <div className="hidden md:inline-flex flex-col flex-1 space-y-1">
          <p className='text-6xl text-blue-500 font-bold'>Jupiter Review Hub</p>
          <p className='font-medium text-lg leading-1 text-pink-400'>Your voice matters - Rate your Jupiter hostel stay with | Jupiter Review Hub |</p>
        </div>

        <UserAuth />
        
      </main>
    </div>
  )
}

export default LoginPage

Drashti Kheni · Accepted Answer · 2023-03-27 04:21:46Z

I think you need to set setIsLogin to true in onClick event of Login as an admin.

Try once with below code:

const LoginForm = () => {
  return (
    <div className="bg-white rounded-2xl shadow-2xl flex flex-col w-full md:w-1/3 items-center max-w-4xl transition duration-1000 ease-out">
      <h2 className="p-3 text-3xl font-bold text-pink-400">
        Jupiter Review Hub
      </h2>
      <div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
      <h3 className="text-xl font-semibold text-blue-400 pt-2">Log in</h3>

      {/* Inputs */}
      <div className="flex flex-col items-center justify-center">
        <input
          type="email"
          className="rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0"
          placeholder="Email"
        ></input>
        <input
          type="password"
          className="rounded-2xl px-2 py-1 w-4/5  text-blue-500 md:w-full border-[1px] border-blue-400 m-1 focus:shadow-md focus:border-pink-400 focus:outline-none focus:ring-0"
          placeholder="Password"
        ></input>
        <button className="rounded-2xl m-2 text-white bg-blue-400 w-2/5 px-4 py-2 shadow-md hover:text-blue-400 hover:bg-white transition duration-200 ease-in">
          Log in
        </button>
      </div>
      <div className="inline-block border-[1px] justify-center w-20 border-blue-400 border-solid"></div>
      <p className="text-blue-400 mt-4 text-sm">Don't have an account?</p>
      <p
        className="text-blue-400 mb-4 text-sm font-medium cursor-pointer"
        onClick={() => setIsLogin(false) && setIsSignUp(true)}
      >
        Register here
      </p>
      <p className="text-blue-400 mt-4 text-sm">OR</p>
      <p
        className="text-blue-400 mb-4 text-sm font-medium cursor-pointer"
        onClick={() => {
          setIsLogin(true);  //Change this to true
          setIsAdmin(true);
          setIsSignUp(false);
         }
        }
      >
        Login as an Admin
      </p>
    </div>
  );
};

Collectives™ on Stack Overflow

Cannot render third react component using conditional rendering

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related