Yup validation for nested object returns error (Objects are not valid as a React child)

Question

This is my Formik form that I want to validate with yup

{
  "images": [],
  "fundingGoal": 1337,
  "name": {
    "en": "english name",
    "fr": "french name"
  },
  "description": {
    "en": "english project desc",
    "fr": "french project desc"
  },
  "country": "Anguilla",
  "city": "city",
  "address": "address",
  "location": "",
  "socialMedia": "facebook",
  "contact": "contact",
  "currency": "USD",
  "sdgs": [
    "NO_POVERTY"
  ]
}

My current yup schema:

const ProjectInputSchema = yup.object().shape({
    id: yup.string(),
    name: yup.object().shape({
        en: yup.string().required(),
        fr: yup.string()
    }),
    description: yup.object(),
    images: yup.array(),
    ...
});

How I render my form with the name object:

<Form.Group as={Col} md={{span: 5}} controlId="projectName">
    <Form.Label>
        {t('projectName')}
    </Form.Label>
    {
        <Form.Control
            type="text"
            name="name.en"
            value={(values['name'] as I18n).en}
            onChange={handleChange}
        />
    }
    ...

As soon as I type a character into name or description, I get the following console error:

Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {fr}). If you meant to render a collection of children, use an array instead.

I followed the example implementation (https://codesandbox.io/s/y7q2v45xqx) for nested object but I do not see a difference.

In your render, you might be trying to render some objects/array directly. Check your render function once. [This](https://stackoverflow.com/questions/52428879/objects-are-not-valid-as-a-react-child-if-you-meant-to-render-a-collection-of-c) might help — Sunil Chaudhary, Dec 08 '19 at 10:06
I am rendering it directly with `` and I only get the error when I add the validation @Sunil — mrks, Dec 08 '19 at 18:11
Not sure what is happening. Are you able to render the form if you hardcode all the values? or Can you try to reproduce the issue in some sandbox (Just copy past the code in the same sandbox which you mentioned with hardcoded values)? or post the full component here. That might help to debug fastly — Sunil Chaudhary, Dec 08 '19 at 18:57
It renders completely normal. I only get the error, when I add my validation schema and start typing in the `name` field for example. Without the schema, my form values looks as I expect it. I will try to create a sandbox for that. — mrks, Dec 08 '19 at 18:59

Yup validation for nested object returns error (Objects are not valid as a React child)

0 Answers0