How to fix Cannot read properties of undefined (reading "length") in React

// BAD - state is undefined
const [items, setItems] = useState();

// GOOD - state defaults to empty array
const [items, setItems] = useState([]);

// For objects
const [data, setData] = useState(null);  // or {}

// In class components
constructor(props) {
  super(props);
  this.state = {
    items: [],  // NOT undefined
    loading: true,
    error: null
  };
}

// BAD - crashes if items is undefined
return <div>{items.length}</div>;

// GOOD - conditional check
return <div>{items ? items.length : 0}</div>;

// GOOD - optional chaining (nullish coalescing)
return <div>{items?.length ?? 0}</div>;

// GOOD - with ternary for rendering
{items && items.length > 0 ? (
  <ul>
    {items.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
) : (
  <p>No items found</p>
)}

// GOOD - array/object safe access
const itemCount = Array.isArray(items) ? items.length : 0;

function UserList() {
  const [users, setUsers] = useState([]);      // Start with empty array
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchUsers()
      .then(data => {
        setUsers(data || []);  // Fallback to empty array if undefined
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setUsers([]);          // Clear users on error
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  // Now safe to access users.length
  return (
    <div>
      <p>Total users: {users.length}</p>
      {users.map(user => <div key={user.id}>{user.name}</div>)}
    </div>
  );
}

interface User {
  id: string;
  name: string;
}

// Defines that items must be an array
const [items, setItems] = useState<User[]>([]);

// Function that returns an array
function getUsers(): User[] {
  return [];  // Must return array, not undefined
}

// Type guards prevent undefined access
function processItems(items: User[] | undefined) {
  // Must check before using length
  if (!items || items.length === 0) {
    return 'No items';
  }
  return items.map(item => item.name);
}

// Use union types to be explicit
const [data, setData] = useState<string[] | null>(null);

// Optional chaining works smoothly with types
const count = data?.length ?? 0;

import PropTypes from 'prop-types';

// Option 1: PropTypes validation
function ItemList({ items }) {
  return items.map(item => <div key={item.id}>{item.name}</div>);
}

ItemList.propTypes = {
  items: PropTypes.arrayOf(PropTypes.object).isRequired
};

ItemList.defaultProps = {
  items: []  // Default fallback
};

// Option 2: TypeScript
interface ItemListProps {
  items: Array<{ id: string; name: string }>;
}

function ItemList({ items }: ItemListProps) {
  return items.map(item => <div key={item.id}>{item.name}</div>);
}

// Usage - parent must provide items
<ItemList items={[]} />  // Always pass an array

// Optional chaining (?.) - safely access properties
const length = user?.profile?.hobbies?.length;  // Returns undefined if any step is null/undefined
const first = items?.[0];                        // Safe array access
const count = callback?.();                      // Safe function call

// Nullish coalescing (??) - provide default for undefined/null
const itemCount = items?.length ?? 0;             // Use 0 if undefined
const name = user?.name ?? 'Unknown';
const data = response?.data ?? [];                // Default to empty array

// Combining them
function renderItems(items) {
  const count = items?.length ?? 0;
  const maxItems = items?.slice(0, 10) ?? [];

  return (
    <div>
      <p>Showing {count} items</p>
      {maxItems.map(item => <div key={item?.id}>{item?.name}</div>)}
    </div>
  );
}

// BAD - might return undefined
function getFilteredItems(items) {
  if (items.length === 0) {
    return;  // Returns undefined!
  }
  return items.filter(item => item.active);
}

// GOOD - always returns array
function getFilteredItems(items) {
  if (!Array.isArray(items)) {
    return [];  // Return empty array
  }
  return items.filter(item => item.active);
}

// GOOD - explicit return type
function getFilteredItems(items: Item[]): Item[] {
  return items.filter(item => item.active);
}

// GOOD - with descriptive defaults
function getItemNames(items: any): string[] {
  const validItems = Array.isArray(items) ? items : [];
  return validItems.map(item => item?.name ?? 'Unknown').filter(Boolean);
}

// Utility function for safe length check
const getLength = (value) => {
  return Array.isArray(value) || typeof value === 'string'
    ? value.length
    : 0;
};

// Safe map function
const safeMap = (items, callback) => {
  return Array.isArray(items) ? items.map(callback) : [];
};

// Safe filter
const safeFilter = (items, predicate) => {
  return Array.isArray(items) ? items.filter(predicate) : [];
};

// Usage in components
function Component({ items }) {
  return (
    <div>
      <p>Count: {getLength(items)}</p>
      {safeMap(items, item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

// Or use lodash/underscore
import { isEmpty, size } from 'lodash';

function Component({ items }) {
  if (isEmpty(items)) return <p>No items</p>;
  return <div>Count: {size(items)}</div>;
}