Search code examples
reactjsredux

Error: Objects are not valid as a React child (found: Error: Request failed with status code 400). If you meant to render a collection of children,

Error: Objects are not valid as a React child (found: Error: Request failed with status code 400). If you meant to render a collection of children, use an array instead.

I am not able to understand whats doing wrong here

const { error, loading }: CreateUserState = useSelector((state: RootState) => state.createUser);

  return (
        <>
            <GDialog title="User Management" open={open} showDialog={showDialog}>
                {loading === false && error !== "" ? <Alert>{error}</Alert> : <></>}
                <form id="request-new-form" className="groundup-form" onSubmit={formik.handleSubmit}>
                    <GFormInput<UserFormFields> formik={formik} id="username" label="User Name" />
                    <GFormInput<UserFormFields> formik={formik} id="email" label="Email" />
                </form >
            </GDialog >
        </>
    )

Error I am getting

Solution

  • Most likely error is an object, not a string. Try to use this

    {loading === false && error !== "" ? <Alert>{JSON.stringify(error)}</Alert> : <></>}

    If you see and object in the alert then you need to create the case when error is not a string.