Objects are not valid as React child - Fix (2026) | Tutorials Logic

What is This Error?

The error "Objects are not valid as a React child" occurs when you try to render a plain JavaScript object directly in JSX. React can only render strings, numbers, arrays, or React elements — not plain objects.

Error Message:

Error: Objects are not valid as a React child (found: object with keys {id, name}). If you meant to render a collection of children, use an array instead.

Common Causes

Rendering an object directly in JSX instead of its properties
Rendering a Date object directly (use .toString() or .toLocaleDateString())
Rendering a Promise instead of awaiting its value
Accidentally passing an object where a string is expected
Rendering state that is an object instead of a primitive

Quick Fix (TL;DR)

Quick Solution

// ❌ Problem — rendering an object
const user = { id: 1, name: "Alice" };
return {user}; // Error!

// ✅ Solution — render specific properties
return {user.name};

// ✅ Or use JSON.stringify for debugging
return {JSON.stringify(user)}
;

Common Scenarios & Solutions

Scenario 1: Rendering Object Instead of Property

Problem

function UserCard({ user }) {
  return (
    
      {user}  {/* Error! user is an object */}
    
  );
}

Solution

function UserCard({ user }) {
  return (
    
      {user.name}   {/* ✅ Access specific property */}
      {user.email}
    
  );
}

Scenario 2: Rendering a Date Object

Problem

const createdAt = new Date();
return Created: {createdAt}
; // Error!

Solution

const createdAt = new Date();
return Created: {createdAt.toLocaleDateString()}; // ✅
// Or
return Created: {createdAt.toString()}
; // ✅

Scenario 3: Rendering a Promise

Problem

function App() {
  const data = fetch('/api/data').then(r => r.json()); // Promise!
  return {data}; // Error!
}

Solution

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(r => r.json())
      .then(setData); // ✅ Store resolved value in state
  }, []);

  return {data?.name};
}

Scenario 4: Wrong State Shape

Problem

const [status, setStatus] = useState({ loading: true, error: null });
return {status}
; // Error! status is an object

Solution

const [status, setStatus] = useState({ loading: true, error: null });
return (
  
    {status.loading && Loading...}  {/* ✅ */}
    {status.error && {status.error}}  {/* ✅ */}
  
);

Best Practices to Avoid This Error

Always access specific properties - Use dot notation to access object properties
Convert Dates to strings - Use .toLocaleDateString() or .toString()
Use useEffect for async data - Never render Promises directly
Use TypeScript - Catch type mismatches at compile time
Debug with JSON.stringify - Temporarily use JSON.stringify(obj) to inspect objects
Check API response shape - Verify the structure of data before rendering
Use optional chaining - Use ?. to safely access nested properties

Related Errors

Key Takeaways

React can only render strings, numbers, arrays, and React elements — not plain objects
Access specific object properties using dot notation instead of rendering the whole object
Date objects must be converted to strings before rendering
Never render Promises directly — use useEffect and useState to handle async data
Use JSON.stringify() temporarily to debug what an object contains
TypeScript helps catch these errors at compile time