Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to change the Page in React.js

I’m learning React.js and I’m creating a demo.

I have created a Login page. Now I want to develop the functionality that if I’m using admin’s credentials then I should change the current page layout to listing of employees. And if I’m using the employee’s credentials then I should change page to show the details of that employee.

Currently it’s not able to print content after proper login.

App.js

import { useState } from 'react';

import './App.css';
import USER_DATA from './userData';
import AdminPage from './components/Admin';
import EmployeePage from './components/Employee';

function App() {
  let [userEmail, setEmail] = useState('[email protected]'),
    [userPassword, setPassword] = useState('password');

  function handleEmail(event) {
    setEmail(event.target.value);
  }

  function handlePassword(event) {
    setPassword(event.target.value);
  }

  function handleLogin(email, password) {
    for (let user of USER_DATA) {
      if (user.userEmail === email) {
        if (user.password === password) {
          if (user.isAdmin) return <AdminPage />;
          else return <EmployeePage />;
        } else {
          console.log('Password not matched ..... ');
        }
      } else {
        console.log('Email not matched ..... ');
      }
    }
  }

  return (
    <div className='App'>
      <header className='App-header'>
        <p className='P'>Welcome there!</p>
        <div
          id='input-div'
          style={{
            display: 'flex',
            flexDirection: 'column',
            margin: '20px',
            alignContent: 'left',
          }}
        >
          <label>Email</label>
          <input
            type='email'
            id='email'
            onChange={handleEmail}
            placeholder={userEmail}
            // value={userEmail}
            required
          />
          <label>Password</label>
          <input
            type='password'
            id='password'
            onChange={handlePassword}
            // value={userPassword}
            placeholder={userPassword}
            required
          />
        </div>

        <div style={{ display: 'flex', margin: '10px' }}>
          <button
            className='Button'
            onClick={() => handleLogin(userEmail, userPassword)}
          >
            Login
          </button>
          <button className='Button'>Registration</button>
        </div>
      </header>
    </div>
  );
}

export default App;

userData.js

const userData = [
  {
    userId: 1,
    userEmail: '[email protected]',
    password: 'password',
    isAdmin: true,
  },
];

export default userData;

Admin.jsx

export default function AdminPage() {
  return (
    <>
      <p>Admin Login</p>
    </>
  );
}

Thank for in advance.

Tags:

2

Answers


  1. 0

    a few things here, first of all, you are returning components from the handleLogin function, which you call from an onClick button, therefore you won’t see any change in your page. I highly suggest reviewing React router, that way you can create two different pages you can redirect users to from the onClick action (handleLogin function), in each page you would render the components (AdminPage and EmployeePage />).

    In case you don’t want to dive into react router yet, then it’s important you know that you won’t ever return JSX components in buttons’ onClick callbacks, what you can do is create another state value called isAdminUser, you can set it in the onClick callback function (handleLogin in your case, and exactly where you return the components), then declare a new variable may be called "componentToRender" and assign its value depending on whether the isUser state variable is true or false, then render that const in your component like
    {componentToRender} below the header, componentToRender example:

    const componentToRender = useMemo(() => isAdminUser ? <AdminPage /> : <EmployeePage />, [isAdminUser])

    ....
</Header>
{componentToRender}
....
    Login or Signup to reply.
  2. 0

    You can’t return JSX from an callback function and expect it to be rendered. You need to update some React state and then render that state to JSX.

    I suggest abstracting the current logic into a "Login" component, and using a user state there in the root App component.

    Example:

    This Login component is passed a setUser callback from the parent component to enqueue a state update.

    const Login = ({ setUser }) => {
  const [userEmail, setEmail] = useState('[email protected]');
  const [userPassword, setPassword] = useState('password');

  function handleEmail(event) {
    setEmail(event.target.value);
  }

  function handlePassword(event) {
    setPassword(event.target.value);
  }

  function handleLogin(email, password) {
    for (let user of USER_DATA) {
      if (user.userEmail === email) {
        if (user.password === password) {
          setUser(user);
        } else {
          console.log('Password not matched ..... ');
        }
      } else {
        console.log('Email not matched ..... ');
      }
    }
  }

  return (
    <header className='App-header'>
      <p className='P'>Welcome there!</p>
      <div
        id='input-div'
        style={{
          display: 'flex',
          flexDirection: 'column',
          margin: '20px',
          alignContent: 'left',
        }}
      >
        <label>Email</label>
        <input
          type='email'
          id='email'
          onChange={handleEmail}
          placeholder={userEmail}
          // value={userEmail}
          required
        />
        <label>Password</label>
        <input
          type='password'
          id='password'
          onChange={handlePassword}
          // value={userPassword}
          placeholder={userPassword}
          required
        />
      </div>

      <div style={{ display: 'flex', margin: '10px' }}>
        <button
          className='Button'
          onClick={() => handleLogin(userEmail, userPassword)}
        >
          Login
        </button>
        <button className='Button'>Registration</button>
      </div>
    </header>
  );
};

    Conditionally render the login "page" when the user state is undefined, otherwise conditionally render either of the admin or employee page when user is defined.

    function App() {
  const [user, setUser] = useState(); // <-- initially undefined

  return (
    <div className='App'>
      {user 
        ? user.isAdmin ? <AdminPage /> : <EmployeePage />
        : <Login setUser={setUser} />
      }
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search