How to fix Error: Minified React error #31; visit https://react.dev/errors/31?args[]=%5Bobject%20Object%5D for the full message or use the non-minified dev environment for full errors and additional helpful warnings. in React

ReactBEGINNERMEDIUMUpdated Dec 8, 2025· 154 views

This error occurs when attempting to render a plain JavaScript object directly in JSX. React requires you to render primitives, elements, or arrays, not raw objects.

Quick fix

Fixes Error: Minified React error #31; visit https://react.dev/errors/31?args[]=%5Bobject%20Object%5D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

# Run development build instead of production
npm run dev
  1. Enable development mode to see the full error message
  2. Identify where the object is being rendered
  3. Access object properties instead of rendering the object
  4. Fix array mapping to render object properties
react — error
# Run development build instead of production
npm run dev
Error: Minified React error #31; visit https://react.dev/errors/31?args[]=%5Bobject%20Object%5D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

What this error means

Minified React error #31 corresponds to the full error message: "Objects are not valid as a React child (found: [object Object]). If you meant to render a collection of children, use an array instead." This error occurs when React encounters a plain JavaScript object being passed as a child element in JSX, which is not allowed. React can only render specific types of values: strings, numbers, React elements, arrays of these types, fragments, portals, and booleans (which render nothing). When you try to render an object directly, React doesn't know how to display it and throws this error. The error message is minified in production builds to reduce bundle size, but the underlying issue is always the same: attempting to render an invalid data type. This error commonly appears when developers forget to access object properties, accidentally pass entire objects instead of their values, or improperly handle API responses and state management. The error name includes a link to the React error decoder with specific arguments showing what object caused the problem.

Typical symptoms

  • Application crashes with "Minified React error #31" in production builds
  • Error message includes a link to react.dev/errors/31 with encoded arguments
  • Component renders blank or fails to display expected content
  • Console shows "Objects are not valid as a React child" in development mode
  • Error occurs after upgrading to Next.js 15 without React 19+ in all workspaces
  • Components that previously worked break after data structure changes
  • Error appears when mapping over arrays of objects without proper rendering

Common causes

  1. Attempting to render a plain JavaScript object directly in JSX (e.g., {user} instead of {user.name})
  2. Passing an entire object as a child instead of accessing specific properties
  3. Mapping over an array of objects without extracting renderable values from each object
  4. Returning an object from a component instead of a valid React element
  5. Using Date objects directly in JSX without converting to string or number
  6. Version mismatch between React versions in a monorepo (Next.js 15 requires React 19+)
  7. Accidentally passing props objects or state objects directly as children
  8. Using objects in conditional rendering without proper property access

How to fix "Error: Minified React error #31; visit https://react.dev/errors/31?args[]=%5Bobject%20Object%5D for the full message or use the non-minified dev environment for full errors and additional helpful warnings."

1Enable development mode to see the full error message

If you're seeing the minified error, switch to development mode to get the complete error with helpful details:

bash
# Run development build instead of production
npm run dev

The full error message will show you exactly which object is causing the problem and where it's being rendered. This makes debugging much easier than working with the minified version.

2Identify where the object is being rendered

Look at the component stack trace to find where you're passing an object as a child. Common patterns to look for:

jsx
// ❌ WRONG: Rendering entire object
const user = { name: "John", age: 30 };
return <div>{user}</div>;

// ❌ WRONG: Passing object in mapping
const items = [{ id: 1, name: "Item 1" }];
return <div>{items}</div>;

// ❌ WRONG: Using Date object directly
return <p>{new Date()}</p>;

Check your JSX for curly braces containing variables that might be objects rather than primitives.

3Access object properties instead of rendering the object

Replace object references with specific property access:

jsx
// ✅ CORRECT: Access individual properties
const user = { name: "John", age: 30 };
return (
  <div>
    <p>Name: {user.name}</p>
    <p>Age: {user.age}</p>
  </div>
);

// ✅ CORRECT: Convert Date to string
return <p>{new Date().toLocaleDateString()}</p>;

// ✅ CORRECT: Use JSON.stringify for debugging only
return <pre>{JSON.stringify(user, null, 2)}</pre>;

Always extract renderable values (strings, numbers) from objects before passing them to JSX.

4Fix array mapping to render object properties

When mapping over arrays of objects, ensure you're rendering properties, not the objects themselves:

jsx
// ❌ WRONG: Returns objects
const items = [{ id: 1, name: "Item 1" }, { id: 2, name: "Item 2" }];
return <ul>{items}</ul>;

// ✅ CORRECT: Map to extract properties
return (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

// ✅ CORRECT: Destructure in map
return (
  <ul>
    {items.map(({ id, name }) => (
      <li key={id}>{name}</li>
    ))}
  </ul>
);

Always use proper key props when rendering lists.

5Check for React version mismatches in monorepos

If you're using Next.js 15, ensure all workspaces use React 19+:

bash
# Check installed React versions
npm list react react-dom

# Update to React 19 if needed
npm install react@^19 react-dom@^19

# In monorepos, check all workspace package.json files

For Next.js 15:

json
{
  "dependencies": {
    "next": "15.x",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}

Version mismatches can cause this error even with correct JSX code.

6Add type checking to prevent object rendering

Use TypeScript or PropTypes to catch these errors during development:

typescript
// TypeScript: Define proper prop types
interface UserDisplayProps {
  name: string;  // Only accept primitives
  age: number;
}

function UserDisplay({ name, age }: UserDisplayProps) {
  return <div>{name} is {age} years old</div>;
}

// Call with properties, not the object
const user = { name: "John", age: 30 };
<UserDisplay name={user.name} age={user.age} />
jsx
// PropTypes: Runtime validation
import PropTypes from 'prop-types';

UserDisplay.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired
};

Type checking helps catch these errors before runtime.

7Handle API responses and async data properly

Ensure API responses are properly destructured before rendering:

jsx
// ❌ WRONG: Rendering entire response object
const [data, setData] = useState(null);
return <div>{data}</div>;

// ✅ CORRECT: Extract specific fields
const [data, setData] = useState(null);
return <div>{data?.message || "Loading..."}</div>;

// ✅ CORRECT: Render array of objects properly
const [users, setUsers] = useState([]);
return (
  <ul>
    {users.map(user => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

Always validate and extract data from API responses before rendering.

Advanced notes

In Next.js applications, this error can occur during server-side rendering if you're passing non-serializable objects (like Date objects or functions) as props. Use getServerSideProps or getStaticProps to serialize data properly before passing to components. For Next.js 15 specifically, the framework requires React 19+ in all workspaces within a monorepo to prevent this error, as older React versions can cause compatibility issues.

When working with complex state management libraries like Redux or Zustand, be careful not to pass entire store slices to components. Instead, use selectors to extract only the primitive values you need to render. This also improves performance by reducing unnecessary re-renders.

For debugging purposes in development, you can temporarily use JSON.stringify() to visualize object contents, but never leave this in production code as it's inefficient and creates poor user experiences. Consider using React DevTools to inspect component props and state to identify unexpected object structures.

If you're seeing this error in third-party components or UI libraries (like Forge UI Kit with Date fields, or Grafana dashboard annotations), check the library documentation for proper prop formats and consider filing bug reports if the library is passing objects incorrectly. Some libraries may have specific formatters or converters for complex data types.

Frequently asked questions

What does "Error: Minified React error #31; visit https://react.dev/errors/31?arg" mean?
Minified React error #31 corresponds to the full error message: "Objects are not valid as a React child (found: [object Object]). " This error occurs when React encounters a plain JavaScript object being passed as a child element in JSX, which is not allowed. React can only render specific types of values: strings, numbers, React elements, arrays of these types, fragments, portals, and booleans (which render nothing).
How do I fix "Error: Minified React error #31; visit https://react.dev/errors/31?arg"?
This error occurs when attempting to render a plain JavaScript object directly in JSX. React requires you to render primitives, elements, or arrays, not raw objects.
What causes "Error: Minified React error #31; visit https://react.dev/errors/31?arg"?
Attempting to render a plain JavaScript object directly in JSX (e.g., {user} instead of {user.name}) Passing an entire object as a child instead of accessing specific properties Mapping over an array of objects without extracting renderable values from each object
Is the "Error: Minified React error #31; visit https://react.dev/errors/31?arg" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading