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

No se nombra ningún archivo fuente ni ninguna prueba. Primero confirma si este mensaje de error pertenece a react.dev o al runtime de React; después, localiza el mensaje existente y sus pruebas. Se considera terminado cuando la propiedad está clara y el mensaje ofrece indicaciones prácticas sin inducir a error a los usuarios sobre functional components o JSX props.