Next.js Discord

Discord Forum

Array nested within form state not being recognized as an array by React

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
For the life of me, I can't figure out why these lines are returning an error.
 {state?.error?.zodErrors?.fieldErrors?.password.map((err, i) => (<p key={i} className="text-red-500 text-xs mt-1">{err}</p>))}

Here's the error
Error: Objects are not valid as a React child (found: object with keys {zodErrors}). If you meant to render a collection of children, use an array instead.

My issue is when I console log the same value
console.log(state.error?.zodErrors?.fieldErrors?.password)

it logs 
Array [ "Must be 8 or more characters long" ]
​
0: "Must be 8 or more characters long"
​
length: 1
​
<prototype>: Array []

What's going on?

5 Replies

American Crow
Looks like your {err} is a object not a string? ...<p key={i}>{JSON.stringify(err)}</p>
Asiatic LionOP
That didn't fix it. 
console.log(typeof(state?.error?.zodErrors?.fieldErrors?.password[0]))
also returns type string in the console.
American Crow
is the error definitely in the map you posted? So when you delete the map the error is gone?
@Asiatic Lion Yup lol
American Crow
🤷