reactjs - React component will not load and is complaining of a child element issue

Question

I installed Formik and I went through the docs and tutorials, and came up with my own form as you can see below.

I use this form in another page like this:

    <div>
        {showYourForm && (
            <YourForm_Test
                idVal={idVal}
                titleVal={titleVal}
                typeIdVal={typeIdVal}
                officeIdVal={officeIdVal}
                countryIdVal={countryIdVal}
            />
        )}
    </div>

But whenever it tries to display, it gives me this error:

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

This error is on line 17, which is the line that starts with <Formik

I've tried everything, examining the Formik docs, checking my code against the examples, but I can't find anything that might be causing it.

Hopefully someone has run into something like this because I'm at my wits end.

Any help would be wonderful!

Here is my full component below that is causing the error:

import { Formik, Field, Form, ErrorMessage } from 'formik';
import Button from 'react-bootstrap/Button';
import axios from 'axios';
import React, { useState, useCallback, useEffect } from "react";

const YourForm_Test = (props) => {

    return (
        <Formik
            initialValues={{ 
                id: props.idVal,
                title: props.titleVal,
                spreadsheetTypeId: String(props.typeIdVal),
                officeId: String(props.officeIdVal),
                countryId: String(props.countryIdVal)
             }}

                onSubmit={(values, { setSubmitting }) => {
                    axios({
                        method: "PUT",
                        url: "api/spreadsheets/" + values.id,
                        data: JSON.stringify(values),
                        headers: { 'Content-Type': 'application/json; charset=utf-8' }
                    });
                    alert("Spreadsheet Saved.");
                }}
         >
                <div id="portal_SpreadsheetDetails">
                    <div id="Details_Heading"></div>
                    <div id="Details"><button> SHOW </button></div>
                    <Styles>
                        <form>
                            <label htmlFor="title">
                                Title of Experiment
                            </label>
                            <Field id="title" type="text" name="title"/>

                            <label htmlFor="spreadsheetTypeId">
                                Types of Sources
                            </label>

                            <Field as="select" name="spreadsheetTypeId">
                                <option value="red">Red</option>
                                <option value="green">Green</option>
                                <option value="blue">Blue</option>
                            </Field>

                            <label htmlFor="description">
                                Spreadsheet Description
                            </label>
                            <Field name="description" component="textarea" />

                            <label htmlFor="email">
                                Email
                            </label>
                            <Field id="supervisorEmail" name="supervisorEmail" type="email"/>
                            <br />
                            <div>
                                <Button type="submit">
                                    UPDATE
                                </Button>
                            </div>
                        </form>
                    </Styles>
                </div>
            </Formik>
    );
};

export default YourForm_Test;

question from:https://stackoverflow.com/questions/65835695/react-component-will-not-load-and-is-complaining-of-a-child-element-issue

Answer 1

Waitting for answers