[Suggestion]: Change the error message "Objects are not valid as a React child (found: object with keys {aaa, bbb}). If you meant to render a collection of children, use an array instead.

Summary

You get the error message above when you create a functional component and omit to surround the properties with curly braces {}.

The message should be more directive.

Page

No response

Details

I think everybody does this when they first create a component. Type the error in your search engine, and you will see thousands of people asking the same question. For the sake of argument I attempted to "use and array instead" and got even more mysterious messages.

I believe the error message should be more like (for a component called MyComponent ) :

MyComponent is a functional component, and as such groups together all properties from the JSX tag into a single object. To use those properties directly in the body of MyComponent , surround the list of properties with curly brackets, such as MyComponent({foo, bar}). For more information, read https://react.dev/learn/passing-props-to-a-component .

未指定原始檔案或測試。首先確認此錯誤訊息是屬於 react.dev 還是 React runtime，然後找出現有的訊息及其測試。完成的標準是責任歸屬明確，且訊息能提供可執行的指引，同時不會在 functional components 或 JSX props 方面誤導使用者。