[StackOverflow/reactjs] TypeError: Cannot read properties of undefined (reading 'url')

### ROOT CAUSE The error `TypeError: Cannot read properties of undefined (reading 'url')` occurs when trying to access the `url` property of an undefined variable. In React, this typically happens when: 1. A component prop (e.g., `image`) is undefined, but the code attempts to access `image.url` directly. 2. State or context data is undefined, and the code proceeds without checking. 3. API data is incomplete or missing, leading to undefined values in state. ### CODE FIX Use **optional chaining** and **nullish coalescing** to safely access properties and provide fallbacks. Here's a step-by-step fix: 1. **Check for undefined values with optional chaining (`?.`)**: ```jsx // Before const imageUrl = image.url; // After const imageUrl = image?.url; ``` This returns `undefined` if `image` is `null` or `undefined`. 2. **Provide a fallback with nullish coalescing (`??`)**: ```jsx const imageUrl = image?.url ?? '/default-image.jpg'; ``` If `image?.url` is `undefined`, use the default image URL. 3. **Validate props in the component**: Ensure props are initialized with defaults in the component's props definition (e.g., in PropTypes or TypeScript): ```tsx // TypeScript example interface ImageProps { image?: { url?: string; }; } function MyComponent({ image }: ImageProps) { // ... } ``` 4. **Filter undefined values in arrays**: ```jsx // Before {images.map((image) => ( ))} // After {images.filter(Boolean).map((image) => ( ))} ``` 5. **Initialize state with defaults**: ```jsx const [data, setData] = useState<{ url?: string }>({ url: '' }); ``` **Example Fix**: ```jsx // Original code causing the error const ImageComponent = ({ image }) => { return ; }; // Fixed code const ImageComponent = ({ image }) => { const imageUrl = image?.url ?? '/placeholder.jpg'; return ; }; ``` **Key Takeaways**: - Always check for undefined values before accessing properties. - Use `?.` and `??` to handle optional and fallback cases. - Validate props and state initialization to prevent undefined values.