[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。