I am currently experiencing a problem whereby when I type the correct username and password credentials into the React Login form (which is initialized as user and pass) the MockMail component is not being rendered.
I have done console logs in the handleLogin function and the expected values are correct: Attempting login with: user pass
Logged in as: user – yet the mockmail still doesn’t render.
However the console logs in the MockmailContainer do not log, meaning there is a problem there?
I am wondering if it is my Router component not configured correctly?
Any help is greatly appreciated, thanks in advance.
import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom';
import { StaticElementContainer } from "./containers/StaticElementContainer";
import { LoginFormContainer } from "./containers/LoginFormContainer";
import { MockMailContainer } from "./containers/MockMailContainer";
import { CreateAccountContainer } from "./containers/CreateAccountContainer";
function App() {
const [loggedIn, setLoggedIn] = useState(false);
const [users, setUsers] = useState([
{ id: 1, username: 'user', password: 'pass', email: '', phone: '' }
]);
const [currentLoggedInUser, setCurrentLoggedInUser] = useState(null);
const handleLogin = (username, password) => {
console.log("Attempting login with:", username, password);
const correctLoginCredentials = users.find(
(user) => user.username === username && user.password === password
);
if (correctLoginCredentials) {
setLoggedIn(true);
setCurrentLoggedInUser(correctLoginCredentials.username);
console.log("Logged in as:", correctLoginCredentials.username);
} else {
console.log("Invalid credentials");
}
};
return (
<Router>
<Routes>
<Route path="/" element={
<StaticElementContainer>
<LoginFormContainer
users={users}
handleLogin={handleLogin}
/>
</StaticElementContainer>
} />
<Route
path="/mockmail"
element={<MockMailContainer
loggedIn={loggedIn}
currentLoggedInUser={currentLoggedInUser}
/>}
/>
<Route path="/create-account" element={
<StaticElementContainer>
<CreateAccountContainer />
</StaticElementContainer>
} />
</Routes>
</Router>
);
}
export default App;
import React, { useState } from 'react';
import { LoginForm } from '../components/LoginForm';
export const LoginFormContainer = ({ users, handleLogin }) => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [usernamePlaceholder, setUsernamePlaceholder] = useState("Username...");
const [passwordPlaceholder, setPasswordPlaceholder] = useState("Password...");
const handleSubmit = (e) => {
e.preventDefault();
handleLogin(username, password);
};
const handleUsernameClick = () => {
setUsernamePlaceholder("");
};
const handlePasswordClick = () => {
setPasswordPlaceholder("");
};
const handleUsernameBlur = () => {
if (username === "") {
setUsernamePlaceholder("Username...");
}
};
const handlePasswordBlur = () => {
if (password === "") {
setPasswordPlaceholder("Password...");
}
};
const handleCreateAccountClick = () => {
// navigate('/create-account');
};
return(
<>
<LoginForm
username={username}
setUsername={setUsername}
password={password}
setPassword={setPassword}
handleSubmit={handleSubmit}
handlePasswordClick={handlePasswordClick}
handleUsernameClick={handleUsernameClick}
usernamePlaceholder={usernamePlaceholder}
passwordPlaceholder={passwordPlaceholder}
handleUsernameBlur={handleUsernameBlur}
handlePasswordBlur={handlePasswordBlur}
handleCreateAccountClick={handleCreateAccountClick}
/>
</>
);
};
import React from "react";
export const LoginForm = ({
username,
setUsername,
password,
setPassword,
handleSubmit,
handlePasswordClick,
handleUsernameClick,
usernamePlaceholder,
passwordPlaceholder,
handleUsernameBlur,
handlePasswordBlur,
handleCreateAccountClick
}) => {
return (
<form onSubmit={handleSubmit}>
<h1 class="thin space">Sign In</h1>
<h2 class='thin gap'>to continue to Gmail</h2>
<label class="space line-height">
<input
class="input"
type='text'
value={username}
placeholder={usernamePlaceholder}
onFocus={handleUsernameClick}
onBlur={handleUsernameBlur}
onChange={(e) => setUsername(e.target.value)}
/>
</label>
<label class="space line-height">
<input
class="input disable-eye-icon"
type='password'
value={password}
placeholder={passwordPlaceholder}
onFocus={handlePasswordClick}
onBlur={handlePasswordBlur}
onChange={(e) => setPassword(e.target.value)}
/>
</label>
<button class="space blue-button" type='submit'>
Login
</button>
<p class="space hyper-link">Forgot Username?</p>
<p class="space hyper-link">Forgot Password?</p>
<button class="last grey-button" onClick={handleCreateAccountClick}>Create account</button>
</form>
);
}
import React from 'react';
export const MockMail = ({ loggedIn, currentLoggedInUser }) => {
return (
<>
{loggedIn && currentLoggedInUser && (
<h1>Welcome, {currentLoggedInUser}!</h1>
)}
</>
)
}
import { MockMail } from '../components/MockMail';
export const MockMailContainer = ({ loggedIn, currentLoggedInUser }) => {
console.log("loggedIn:", loggedIn);
console.log("currentLoggedInUser:", currentLoggedInUser);
return (
<MockMail
loggedIn={loggedIn}
currentLoggedInUser={currentLoggedInUser}
/>
)
}
Jake