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

Không có tệp nguồn hoặc bài kiểm thử nào được nêu. Trước tiên, hãy xác nhận xem thông báo lỗi này thuộc về react.dev hay React runtime, sau đó tìm thông báo hiện có và các bài kiểm thử của nó. Công việc được hoàn tất khi phạm vi phụ trách đã rõ ràng và thông báo đưa ra hướng dẫn có thể hành động mà không khiến người dùng hiểu sai về functional components hoặc JSX props.