Hello, I am trying to learn React and set up a basic 3-page webpage with it. The first page is the login page which I got to implement from outside help but after the login button is clicked I want it to go to an admin page if the user and password match the admin page's default set username and password. But if the username and pass match the student's username then go to the student page. How do create that link between the pages from the login screen? Also, any additional resources to learn to react will be helpful. I am providing the codes below for app.js and loginForm.js. styling is not relevant right now so ignoring CSS. I made no changes to the default index.js file.

App.js

import React, {useState} from 'react'; import LoginForm from './components/loginForm';

function App() {

const adminUser = { userName: "adminUser", passWord: "admin" }

const studentUser = { userName: "studentUser", passWord: "student" }

const [user, setUser] = useState({name:"",userName:""}); const [error, setError] = useState("");

const Login = details => { console.log(details); if(details.userName == adminUser.userName && details.passWord == adminUser.passWord){ console.log("LOGGED IN to Admin"); setUser({ name: details.name, userName: details.userName }); }else if(details.userName == studentUser.userName && details.passWord == studentUser.passWord){ console.log("LOGGED IN To Student"); setUser({ name: details.name, userName: details.userName }); }else{ console.log("Failed to Log in"); setError("Failed to Log in, Check Username/Password"); } }

const Logout = () => { console.log("Logged Out"); setUser({name:"",userName:""}); }

return (

{(user.userName !="") ? (

Welcome, {user.name}

Logout ) : ( )}

); }

export default App;

loginForm.js

import React, {useState} from 'react'

function LoginForm({Login, error}){ const [details, setDetails] = useState({name: "",userName:"",passWord:""}); const submitHandler = e =>{ e.preventDefault(); Login(details); } return (

Collegefulbar

{(error != "") ? (

{error}

): ""}

Name: setDetails({...details, name: e.target.value})} value = {details.name}/>

Username: setDetails({...details, userName: e.target.value})} value = {details.userName}/>

Password: setDetails({...details, passWord: e.target.value})} value = {details.passWord}/>

) }

export default LoginForm;