scrimba
Learn React Router
Actions
Get form data in VanLife
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

Get form data in VanLife
AboutCommentsNotes
Get form data in VanLife
Expand for more info
pages
Login.jsx
run
preview
console
import React from "react"
import {
useLoaderData,
useNavigate,
redirect,
Form
} from "react-router-dom"
import { loginUser } from "../api"

export function loader({ request }) {
return new URL(request.url).searchParams.get("message")
}

/**
* Challenge: Pull in the formData from our Form
* For now, just log the data to the console.
*/

export async function action() {
console.log("Action function")
return null
}

export default function Login() {
const [loginFormData, setLoginFormData] = React.useState({ email: "", password: "" })
const [status, setStatus] = React.useState("idle")
const [error, setError] = React.useState(null)
const message = useLoaderData()
const navigate = useNavigate()

function handleSubmit(e) {
e.preventDefault()
setStatus("submitting")
setError(null)
loginUser(loginFormData)
.then(data => {
navigate("/host", { replace: true })
})
.catch(err => setError(err))
.finally(() => setStatus("idle"))
}

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>
{message && <h3 className="red">{message}</h3>}
{error && <h3 className="red">{error.message}</h3>}

<Form method="post" 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
disabled={status === "submitting"}
>
{status === "submitting"
? "Logging in..."
: "Log in"
}
</button>
</Form>
</div>
)
}
Console
/login
-1:40