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

# Run development build instead of production
npm run dev

// ❌ 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>;

// ✅ 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>;

// ❌ 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>
);

# 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

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

// 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} />

// PropTypes: Runtime validation
import PropTypes from 'prop-types';

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

// ❌ 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>
);