After successfully submitting a form for the first time, I encounter an error upon refreshing the page
import { Link } from 'react-router-dom'
import { PrismaClient, Prisma } from '@prisma/client'
import './Register.css'
const Register = () => {
const registerForm = document.querySelector('.register-form') as HTMLFormElement
const prisma = new PrismaClient()
interface User{
firstname: string
email: string
password: string
}
function registerNewUser(userData: User) {
// const createUser = await prisma.user.create({
// data: {
// name: userData.firstname,
// email: userData.email,
// password: userData.password
// }
// })
console.log(userData)
}
return <div className="register-card" id='form'>
<h2>Register</h2>
<form className="register-form">
<input type="text" name="firstname" placeholder="firstname"/>
<input type="text" name="email" placeholder="email"/>
<input type="password" name="password" placeholder="password"/>
<button onClick={(e) => {
e.preventDefault()
const firstname: string = registerForm.firstname.value
const email: string = registerForm.email.value
const password: string = registerForm.password.value
const newUser: User = {
firstname: firstname,
email: email,
password: password
}
registerNewUser(newUser)
}}>Register</button>
</form>
<Link to="/"><p>I have an account</p></Link>
</div>;
}
export default Register;
Attempts to make the registerNewUser function async didn't resolve the issue. My expectation is that registerNewUser should work and output 'userData' in the console