# TypeError: X is not a function. (In 'X()', 'X' is undefined) when using .map on children

- **ID:** `react/invalid-array-children-map`
- **Domain:** react
- **Category:** type_error
- **Verification:** ai_generated
- **Fix Rate:** 93%

## Root Cause

The 'children' prop is not an array but a single React element, string, or undefined, so calling .map() on it fails.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| React 18.2.0 | active | — | — |
| React 17.0.2 | active | — | — |

## Workarounds

1. **Use React.Children.toArray(children) before calling .map() to safely convert children to an array, regardless of type.** (95% success)
   ```
   Use React.Children.toArray(children) before calling .map() to safely convert children to an array, regardless of type.
   ```
2. **Add a guard to check if children is an array before mapping. If not, wrap it in an array or handle single child separately.** (90% success)
   ```
   Add a guard to check if children is an array before mapping. If not, wrap it in an array or handle single child separately.
   ```

## Dead Ends

- **** — If children is already an array (multiple children), this creates a nested array; .map won't iterate over individual children correctly. (70% fail)
- **** — React.Children.toArray returns an empty array for null/undefined, so .map works, but the real issue is that children might be a single element not in an array, which toArray handles but the user may not realize why. (60% fail)