简体   繁体   中英

Error: React.Children.only expected to receive a single React element child. Formik

I'm getting this error in the Formik props. I've been working with formik for a long time, and this is the first time it happens to me

 const Contacto = () => ( 
    <>
<section id="contact">
    <div class="container">
        <h2>Contactanos</h2>
        
        <div class="flex">

            <div id="form-container">
                <h3>Dejá un mensaje</h3>
               <Formik
                initialValues={{ name: '', email: '', motivo: '', mensaje:'' }}
                validationSchema={Schema}
                onSubmit={(values, { setSubmitting }) => {
                setTimeout(() => {
                setSubmitting(false);
                }, 1000);
                }}
        >   {({
            values,
            errors,
            touched,
            handleChange,
            handleBlur,
            handleSubmit,
            isSubmitting
          }) => (
                <form onSubmit={handleSubmit}>
                    <label for="name">Nombre</label>
                    <input 
                    type="text" 
                    id="name"  
                    name="name"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.name} />
                    {errors.name && touched.name && errors.name}
                    <label for="email">Email</label>
                    <input  
                        id="email"
                        type="email"
                        name="email"
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.email}
                    />
                    {errors.email && touched.email && errors.email}
                    <label for="subject">Motivo</label>
                    <input type="text" 
                            id="subject" 
                            name="motivo"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.motivo}
                    />
                    {errors.motivo && touched.motivo && errors.motivo}
                    <label for="message">Mensaje</label>
                    <textarea id="message"
                              type="mensaje"
                              name="mensaje"
                              onChange={handleChange}
                              onBlur={handleBlur}
                              value={values.mensaje}
                    >Escribí tu mensaje..</textarea>
                    {errors.mensaje && touched.mensaje && errors.mensaje}
                    <button class="rounded">Enviar</button>
                </form>
                )}
                </Formik> 
            </div>

            <div id="address-container">
                <label>Dirección</label>
                <address>
                    San Javier, Cordoba 
                </address>

                <label>Telefono</label>
                <a href="#">3544-32-2323</a>

                <label>Email</label>
                <a href="#">ouremail@domain.com</a>
            </div>
    </div>
    </div>
</section>

</>

); export default Contacto;

It's all inside a Fragment. And the imports are Ok

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM