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.

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.