CODEWITHSUNDEEP
reactjsformsformikyup
mujtaba hussain
mujtaba hussain

Reputation: 11

Objects are not valid as a React child (found: object with keys {})?

  **Reack_formik**

I am trying to validate my form field with Formik , but I am getting the error Objects are not valid as a React child (found: object with keys {}), I saw the same error questions already been asked but in my case I was not able to figure it out So I decided to ask here. First I want to know where is the error my code ,second mostly I am facing this error , Objects are not valid as a React child (found: object with keys {}), so what does actually mean by this error. Your help will be highly appreciated I am trying to figure it out from yesterday but I am not able to solve

import React from 'react'
         import {Formik,Form,Field, ErrorMessage} from "formik"
         import * as  Yup from 'yup' 
         const FormikComponent = () => {
         const initialValues= {
                name:"",
                email:"",
                password:""
            }
         const onSubmit=values=>{
                console.log("Values after submission", values)
            }
            const validationSchema=Yup.object({
                name:Yup.string().required("Requried"),
                email:Yup.string().email("inavlid email formate").required("required"),
                password:Yup.string().required("required")
            })
        return (
            <Formik initialValues={initialValues} validationSchema={validationSchema} 
                           onSubmit= {onSubmit}>
                 <Form action="">
                     <div className="form-control">
                     <label htmlFor="name">name</label>
                     <Field type="text" name="name" id="name"  />
                     <ErrorMessage name="name"/> 
                     </div>
                     <div className="form-control">
                     <label htmlFor="email">email</label>
                     <Field type="email" name="email" id="email"   />
                     <ErrorMessage email="email"/>
                     </div>
                     <div className="form-control">
                     <label htmlFor="password">Password</label>
                     <Field type="Password" name="password" id="password" />
                     <ErrorMessage password="password"/>
                     </div>
                     <button type="submit">Submit</button>
                 </Form>
            </Formik>
        )
    }
    export default FormikComponent ;

      **App.js**


 import './App.css';
import FormikComponent from './Formik4';
function App() {
  return (
       <div className="main">
         <h1>React form</h1>
         {<FormikComponent/>}
       </div>
  );
}
export default App;

Upvotes: 0

Views: 603

Answers (1)

Nischit
Nischit

Reputation: 39

The Error is appearing due to incorrectly written error component

<ErrorMessage email="email"/>

should have been written as

<ErrorMessage name="email"/>

Upvotes: 1

Related Questions