I just wrote a react app now I'm hard time finding out what is going on. The error logs are not sufficient.

Error:

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

I can't find anywhere in my code where I supplied an object as a component.

It also gives me a hint, the object has keys {id, ref}, but the issue is that I have multiple objects with those keys as well, maybe a full list of the keys would help.

CodePudding user response：

This kind of error occurs when, you are trying to render an Object, like if you are trying to render a file having a structure

{
    name: string,
    size: number
}

and you directly render it as

<div>{file}</div>

it will lead to the error you are getting

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

This can be rectified by doing it as

<div>{file.name} and {file.size}</div>

CodePudding user response：

Is there a way to debug react interactively

Yes. To start, install React Dev Tools from your browser's store. This will get you a long ways in debugging.

You can also use tools like Web Storm to debug React.