To better visualize the attempt, it would be exactly as follows:

The error "Objects are not valid as a React child" is rather common and the solution is to manipulate the object so that it becomes a valid element. Consider the following code:

In the above example, we store a string in a variable called myVariable and use it directly as a child for the `<div>` tag. The above code works because the stored value "a" is a primitive type. It would also function properly if it was any other primitive type such as a number or undefined, for example.

The problem starts when myVariable assumes an object. React has no way to tell what to render when provided with an object, thus the Invariant Violation error pops up when attempting so. Let's consider the possible solutions for the following scenario:

Multiple outputs could be expected from the above code. One could argue that it should render the value of each property separated by a comma. Another could expect it to actually print the whole object structure, the property names, and its values. Even though these cases could be decided upon and addressed by the React render, things get trickier when a property holds a function, or even another object, for instance.

Because of the numerous possibilities that exist with non-primitive types (JavaScript objects are the only non-primitive) React's render assumes nothing and throws the "Objects are not valid as a react child" error. And this is excellent because it nows remains in the developer’s hand to decide how to present the data in the object in its application. From the above example, one possible (real) solution would be:

And the above code would render a div with the content: Watermelon: $12

Besides primitive types, other valid react children include React components and HTML tags. In essence, something that React can use to render UI.

Displaying a List of Items

Rendering a collection of items is a common pattern in react applications. Lists, tables, cards, buttons, and other types of components are very often applied through the usage of the .map() array method. Let's check an example. 

A JavaScript object represents the data from a given table row, it contains the properties name and age. More objects sharing the same structure exist and they are stored inside an array. The array, which is a special JavaScript variable, holds, belong to other class methods, a very useful one called map.

The execution of the map method iterates through each item in this array, which are different JavaScript objects containing the name and age data, and allows us to modify what's stored in the array for each of these objects.

This delivers a powerful tool that allows transforming a collection of data into react components. By applying the map method in the array and returning JSX for each element, which is React's own syntax that looks like a combination of HTML and JavaScript.

Also, if you are not sure of the difference between a function and a method, I recommend checking out this article.

The "Objects are not valid as a React child" error happens when trying to render a collection of data by mistakenly returning the object when applying the map method instead of using the data from the object to create and return JSX.

The code example below shows how the above example could have been written wrong and resulting in the error.

‍
Notice the usage of `user` instead of `user.age`. Since it refers to the whole object in question, it causes the code to break. The error could also happen by forgetting to apply the map method at all. This would result in an array of objects being passed to the return of the react components, and since objects are not primitive types, they can't be rendered.

What would actually work this way is to use an array of primitive types, such as an array of string:

Since react knows what to render when provided with primitive types, it can easily render a collection of primitive types. But it is unlikely to be seen applied like this because it doesn't allow for manipulating how it will be displayed. You can see from the example that it simply concatenates each string from the array, resulting in the text "Abc".

Also, another thing to bear in mind is that it results in the following HTML:

`<div class="App">Abc</div>`

A real case would prefer employing a proper tag to handle text, such as `<p>` for a paragraph of one of the h tags for headings. This post by Flavio Copes illustrates the usage of different HTML tags for texts.

Underlying Mistakes

Another possible mistake to beware of is unintentionally creating an object from a primitive type. This happens because of an existing syntax to create an object's property tuple: Open and closing curly braces with a variable inside of it.

For instance, the following code logs to the console an object where the variable name becomes the property name and the variable data, the value:

This could be useful when debugging to easily log the value of a variable and keep track of it's name at the same time. However, a more likely to happen situation would be when applying the map method. Take a look at the following example: 

The mistake happens at the return statement, as the data being returned is ({ user }) instead of just (user). The existence of the curly braces resolves to the creation of an object, and would be the exact same of writing `{user: user.value}`.

This is most likely unintended, and one possible reason for it to appear is when using conditional rendering. If there existed a JS expression with a ternary expression and it was later on removed, it's possible that the curly braces are accidental leftovers.

The code above represents a comparison (ternary inside a JS expression) used to display the data in upper case if the given user happens to be "User 1". This would render the following: (USER 1)(User 2)(User 3).

The possible fault here would be to remove the ternary expression and keep the open and close curly braces which, in this case, were used to make a JS expression but would result in the creation of an object if used as stated before. Also, if you are not aware of what these <> </> empty tags represent, you can check this article on React Fragments.

Wrap Up

This is a common error and sometimes it's hard to simply take a look at the code and notice it. Here some of the most the common reasons the error "Objects are not valid as a react child" occur:

• No .map() method was called to render a collection of items from an array.
• An object is being returned instead of accessing one of its properties.
• An object is unintentionally created when attempting to return a primitive
  

The motives for this error to be thrown are the diverse possible scenarios for rendering an object, and, allowing the developer to address how he will present the available data is a worthy feature and not a problem at all. In other words, this is React's way of telling that you should be the one responsible for deciding what to render from the object because React's renderer would very unlikely do a proper job if attempting so.

Inside the error, a clear rule states that JavaScript objects don't fit alongside the components, meaning that you should use the data from the object in order to decide how to create the component to display. 

If you ever run into this problem, take a good look at the error message on the console. It will state inside what component and which line of code the error happened to be thrown. Holding this information and the knowledge that such an object wasn't really supposed to be there, it becomes easy to solve this mistake.

‍

This post was written by a G2i Community member. If you're looking to hire a React developer as knowledegeable and articulate as Paulo Levy, contact our team here.