Formik not displaying on a nextjs page?

Viewed 594

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?

1 Answers

You have to return the JSX inside your Formik children callback.

{({ values, handleChange, handleBlur, handleSubmit }) => {
    return (
        <form onSubmit={handleSubmit}>
            <!-- Rest of the form -->
        </form>
    );
}}

Or the shorthand syntax:

{({ values, handleChange, handleBlur, handleSubmit }) => (
    <form onSubmit={handleSubmit}>
        <!-- Rest of the form -->
    </form>
)}
Related