I attempted to create a basic validation form using Formik. I meticulously followed their tutorial and example, but unfortunately, the form is not functioning correctly. Despite my efforts, I have been unable to identify a solution (Please correct me if I'm mistaken). Below is the error message I encountered:
https://i.sstatic.net/aZPrO.png
package.json
{
"name": "simple-form",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"formik": "^2.4.5",
"next": "14.1.0",
"react": "^18",
"react-dom": "^18",
"yup": "^1.3.3"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.1.0",
"typescript": "^5"
}
}
Formik Code
"use client";
import {Formik} from "formik";
interface MyFormValues {
email: string;
password: string;
}
export default function HomePage() {
const initialValues: MyFormValues = { email: "", password: "" };
return (
<Formik
initialValues={initialValues}
onSubmit={(values) => console.log(values)}
>
{({ handleSubmit, handleChange, handleBlur, values }) => (
<form onSubmit={handleSubmit}>
<input
type="email"
name = "email"
placeholder = "email"
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
/>
<input
type="password"
name = "password"
placeholder = "password"
onChange={handleChange}
onBlur={handleBlur}
value={values.password}
/>
<button type="submit">Submit</button>
</form>
)}
</Formik>
);
}
Thank you in advance