CODEWITHSUNDEEP
reactjsformiktsx
elderlyman
elderlyman

Reputation: 590

Formik form not rendering

Just setting up a basic bonehead form for learning purposes and ... can't seem to render. No errors. Functional component runs. Just nothing to see...

MyForm.tsx

export const MyForm: React.FC = () => {

    console.log("MyForm has been called")
    return (

        <div>

            <Formik initialValues={{ firstName: "roberto" }} onSubmit={data => { console.log(data) }}>
                {({ values, handleChange, handleSubmit, handleBlur }) => {
                    <form onSubmit={handleSubmit}>
                        <TextField value={values.firstName} onChange={handleChange} onBlur={handleBlur} name="firstName" />
                        <pre>JSON.stringify(values)</pre>
                    </form>
                }}

            </Formik>

        </div >
    )
}

I've imported MyForm properly into App.tsx, and MyForm is currently all I'm returning from App.tsx.

No errors. Just nothin...

Upvotes: 3

Views: 2233

Answers (1)

I&#39;m Joe Too
I&#39;m Joe Too

Reputation: 5840

I don't think you're returning your form which is why it's not rendering:

export const MyForm: React.FC = () => {

    console.log("MyForm has been called")
    return (

        <div>

            <Formik initialValues={{ firstName: "roberto" }} onSubmit={data => { console.log(data) }}>
                {({ values, handleChange, handleSubmit, handleBlur }) => (
                    <form onSubmit={handleSubmit}>
                        <TextField value={values.firstName} onChange={handleChange} onBlur={handleBlur} name="firstName" />
                        <pre>JSON.stringify(values)</pre>
                    </form>
                )}

            </Formik>

        </div >
    )
}

Note that I changed the function's curly braces to parens around your <form>. Alternatively, you could leave the curly braces and instead

{({ values, handleChange, handleSubmit, handleBlur }) => {
  return (<form>...</form>)
}}

Upvotes: 7

Related Questions