[Solved] Objects are not valid as a React child

The Objects are not valid as a React child error occurs when we try to render the JavaScript Object or an Array in the JSX code. 

We can resolve the error by applying the .map() method to an array and returning the JSX for each element of an array. In the case of objects, we need to access their properties and render the data.

Why do we get Objects are not valid as a React child error?

As the error message states, React cannot directly render JavaScript objects or JavaScript Arrays as its children. 

There are a few different things that you have coded wrong in React if you are getting this error.

1. Rendering an Object directly in JSX code
2. Rendering a Collection of items directly without using the map() method
3. Rendering a Date object directly in JSX code
4. Calling an async function in the JSX code 
5. Calling a function that returns an object or an invalid child element
6. Wrapping the variable with double curly {{searchItem.text}} braces instead of single {searchItem.text}

Now that we have understood why we get the error let us try to reproduce the error in the React code with some of the scenarios mentioned above.

import * as React from "react";
export default function NavBar() {

    const headerItems = [
        { id: 1, text: 'Home', href: '/' },
        { id: 2, text: 'JavaScript', href: '/javascript' },
        { id: 3, text: 'React', href: '/react' },
    ];

    const searchItem = {
        text: "Search",
        placeholder: "Search ItsJavaScript",
        autocomplete: true
    }

    const currentDate = new Date()

    return (
        <div>
            {currentDate}
            {headerItems}
            {searchItem}
        </div>
    );

}

Output

Fix – Objects are not valid as a React child error.

Rendering the Objects

React doesn’t support rendering the objects in the JSX code. A JavaScript object is a Non Primitive type, whereas react can render only primitive types inside JSX. 

To solve the issue, we need to access the object properties and render them in the JSX code instead of rendering the object. Also, we need to ensure the child properties of an object are primitive type.

In our example, we had a searchItem object with its own properties such as text, placeholder, and autocomplete. As shown below, we need to access these object properties to render the component properly.

import * as React from "react";
export default function NavBar() {

    const searchItem = {
        text: "Search",
        placeholder: "Search ItsJavaScript",
        autocomplete: true
    }

    return (
        <div>
            <label for="search">{searchItem.text}</label>
            <input type="text" placeholder={searchItem.placeholder} />
        </div>
    );

}

Alternatively, you can also use JSON.stringify() method that converts the entire object into a string before it is rendered.

Rendering a Collections of Items

Rendering a collection in react applications is a common practice widely used to render Navbars, tables, lists, cards, etc.

Like objects, react doesn’t support rendering the Arrays in JSX code. We can solve this by using JavaScript’s .map() method to render a valid react child.

In our example, we have a headerItems that consists of an Array of objects, or we can call it a collection of items. Let us use JavaScript’s map() method to resolve the error.

import * as React from "react";
export default function NavBar() {

    const headerItems = [
        { id: 1, text: 'Home', href: '/' },
        { id: 2, text: 'JavaScript', href: '/javascript' },
        { id: 3, text: 'React', href: '/react' },
    ];

    return (
        <div>
            {headerItems.map((item) => {
                return <a href={item.href}>{item.text}</a>
            })}
        </div>
    );

}

Applying the map() method, it iterates once on each element of an array and returns the JSX for each element. Since each element is an object again here, we cannot directly render an object; instead, we need to access its property to bind the data inside the JSX.

Rendering a Date Object

A Date is an object, and it cannot be rendered directly in JSX; instead, we need to convert it into a string using its methods such as toString() or toLocaleDateString().

import * as React from "react";
export default function NavBar() {

    const currentDate = new Date()

    return (
        <div>
            {currentDate.toString()}
        </div>
    );

}

Conclusion

The Objects are not valid as a React child mainly error occurs when we try to render the JavaScript Object or an Array in the JSX code. The possible scenarios which could lead to this error are as follows.

• Rendering an Object directly in JSX code
• Rendering a Collection of items directly without using the map() method
• Rendering a Date object directly in JSX code
• Calling an async function in the JSX code 
• Calling a function that returns an object or an invalid child element
• Wrapping the variable with double curly {{searchItem.text}} braces instead of single {searchItem.text}

We can fix the issue by applying the .map() method to an array and returning the JSX for each element of an array. In the case of objects, we need to access their properties and render the data and for Date objects, we need to use the built-in methods such as toString() or toLocaleDateString() that returns the date in a string format.