I have a "Login" component which has a div with Formik inside it, just some first-last name and email form, there are no errors but the Formik component isn't displaying at all, it is just an empty div, anything else works perfectly. Here's a piece of code, maybe I am missing something:
import Link from "next/link";
import Head from "next/head";
import styles from "../styles/Home.module.css";
import Login from "../components/Login";
export default function Home() {
return (
<>
<Head>
<title>login page</title>
</Head>
<h1>hello</h1>
<Login />
</>
);
}
And the Login component itself:
import { Formik } from "formik";
import { TextField } from "@material-ui/core";
const Login = () => {
return (
<div>
<Formik
initialValues={{ firstName: "", lastName: "", email: "" }}
onSubmit={data => {
console.log(data);
}}
>
{({ values, handleChange, handleBlur, handleSubmit }) => {
<form onSubmit={handleSubmit}>
<TextField
onChange={handleChange}
onBlur={handleBlur}
value={values.firstName}
/>
<TextField
onChange={handleChange}
onBlur={handleBlur}
value={values.lastName}
/>
<TextField
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
/>
</form>;
}}
</Formik>
</div>
);
};
export default Login;
So the <h1>hello</h1> is present on the page, and the empty div which is supposed to have that Login component inside it is present too.
What could the problem be? Maybe I am just blind and missing something simple or is there some sort of package problem?