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

Keine Quelldatei oder kein Test ist angegeben. Bestätige zunächst, ob diese Fehlermeldung zu react.dev oder zur React-Laufzeit gehört, und finde dann die bestehende Meldung und ihre Tests. Erledigt ist die Aufgabe, wenn die Zuständigkeit geklärt ist und die Meldung umsetzbare Hinweise gibt, ohne Nutzer über functional components oder JSX props irrezuführen.