scrimba
Learn React Router
Actions
Pass message to Login page
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Pass message to Login page
AboutCommentsNotes
Pass message to Login page
Expand for more info
pages
Login.jsx
run
preview
console
import React from "react"
import { useNavigate } from "react-router-dom"

/**
* Challenge: Pass a message from the requireAuth function
* that says "You must log in first." and display that message
* in an <h2> BELOW the <h1>. Give it a classname of "red" for
* some quick styling - (I added the CSS already).
*/

export default function Login() {
const [loginFormData, setLoginFormData] = React.useState({ email: "", password: "" })

function handleSubmit(e) {
e.preventDefault()
console.log(loginFormData)
}

function handleChange(e) {
const { name, value } = e.target
setLoginFormData(prev => ({
...prev,
[name]: value
}))
}

return (
<div className="login-container">
<h1>Sign in to your account</h1>
{/* Warning goes here. Give it a classname="red" */}
<form onSubmit={handleSubmit} className="login-form">
<input
name="email"
onChange={handleChange}
type="email"
placeholder="Email address"
value={loginFormData.email}
/>
<input
name="password"
onChange={handleChange}
type="password"
placeholder="Password"
value={loginFormData.password}
/>
<button>Log in</button>
</form>
</div>
)

}
Console
/login
-3:46