Fix "Objects are not valid as a React child" error in React

Fix "Objects are not valid as a React child" error in React

Introduction

While writing React applications, you may have come across the error message "objects are not valid as a react child." This error is a common one, especially when we're just starting out with React and JSX code. It's thrown when you try to directly render an object in JSX, instead of using a valid React child such as a string, number, or React element.

Consider code like this:

export default function Dashboard() {
    const staff = [
        {name: 'Billy', role: 'admin'},
        {name: 'Sally', role: 'contributor'}
    ];
    
    const hq = {
        state: 'Nebraska',
        country: 'USA',
    };
    
    return (
      <>
          <span>{staff}</span>
          <div>
              {hq}
          </div>
      </>
    );
}

In the code example above, the error is thrown because we are trying to render the staff and hq objects directly inside the <span> and <div> elements. Since objects (including arrays) are not valid React children, this will throw a error "Objects are not valid as a React child".

To fix this error, we need to convert the objects into valid React children before rendering them. In this case, we can use the .map() method to iterate over each item of an array and render it as a React element.

Get free courses, guided projects, and more

No spam ever. Unsubscribe anytime. Read our Privacy Policy.

Here's an example of how we can fix the code above to avoid the "objects are not valid as a react child" error:

import React from 'react';

export default function App() {
    const staff = [
        {name: 'Billy', role: 'admin'},
        {name: 'Sally', role: 'contributor'}
    ];

    const hq = {
        state: 'Nebraska',
        country: 'USA',
    };

    return (
        <div>
            {staff.map(user => (
                <div key={user.name}>
                    <p>{user.name}</p>
                    <p>{user.role}</p>
                </div>
            ))}
            
            <h1>HQ</h1>
            <p>State: {hq.state}</p>
            <p>Country: {hq.country}</p>
        </div>
    );
}

In the code above, we use the .map() method to iterate over each object in the list and render it as an HTML element. This allows us to "break out" the object to properly construct it as valid HTML. Otherwise React doesn't know how to render a JavaScript object, which is why it throws the error.

For a simple object like hq, we can access each property individually and specify the HTML rendering for each element.

Conclusion

The "objects are not valid as a react child" error is thrown when you try to pass an object directly to a React component as a prop or child. To fix this error, you need to convert the array, for example, into a valid React child by iterating over its values and rendering them as React elements. This will allow React to render the object as part of the component's output, without throwing an error.

Last Updated: December 13th, 2022
Was this helpful?
Project

React State Management with Redux and Redux-Toolkit

# javascript# React

Coordinating state and keeping components in sync can be tricky. If components rely on the same data but do not communicate with each other when...

David Landup
Uchechukwu Azubuko
Details

Want a remote job?

    © 2013-2023 Stack Abuse. All rights reserved.

    DisclosurePrivacyTerms