This error occurs when you try to return an array of JSX elements from a React component without wrapping them in a Fragment or proper array syntax. React components can return arrays of elements, but they must be properly formatted with key props and array literal syntax.
The "Cannot return an array from render without wrapping in Fragment" error occurs when you attempt to return multiple JSX elements as an array without using proper syntax. In React, you can render arrays of elements, but they must either be wrapped in a Fragment or use explicit array syntax with key props. This error typically happens when developers forget to use square brackets to denote an array or forget to add the required Fragment wrapper. React needs to know that you're intentionally returning an array of elements, not accidentally writing invalid JSX syntax. The distinction is important: returning `<div/> <span/>` is a syntax error, but returning `[<div/>, <span/>]` or `<><div/><span/></>` is valid because React understands the structure clearly.
The simplest solution is to wrap your elements in a React Fragment. This tells React you're intentionally grouping multiple elements:
// Before (Error)
function MyComponent() {
return
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
;
}
// After (Fixed with Fragment shorthand)
function MyComponent() {
return (
<>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</>
);
}This is the recommended approach for most cases. Fragments don't add extra DOM nodes, so your HTML structure stays clean.
If you need to return an array of elements explicitly, use square brackets and add a key prop to each element:
// Using array syntax
function MyComponent() {
return [
<div key="item1">Item 1</div>,
<div key="item2">Item 2</div>,
<div key="item3">Item 3</div>
];
}Important points:
- Each element MUST have a unique key prop when returning arrays
- Use identifiable strings or IDs as keys, not array indices for dynamic lists
- Separate elements with commas (they're array elements)
- This syntax is less common but useful for certain patterns
When dynamically creating lists, use .map() with proper key assignment:
function ItemList({ items }) {
return (
<>
{items.map(item => (
<div key={item.id}>{item.name}</div>
))}
</>
);
}Or return the array directly:
function ItemList({ items }) {
return items.map(item => (
<div key={item.id}>{item.name}</div>
));
}Key considerations:
- Always use a unique identifier (like item.id) for the key
- Never use array index as key for dynamic lists (it causes bugs with list updates)
- Use Fragment with .map() if you need extra elements per item
If you need a semantic wrapper for styling or layout purposes, use a container element:
function MyComponent() {
return (
<div className="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
);
}This approach:
- Adds one extra DOM node (the wrapper)
- Useful if you need CSS styling or semantic grouping
- Better than Fragment when you actually need a container
- Keep in mind that the wrapper becomes part of flex/grid layouts
Verify that your component uses one of these valid patterns:
Valid patterns:
// Pattern 1: Single element
return <div>Content</div>;
// Pattern 2: Fragment shorthand
return (
<>
<div>1</div>
<div>2</div>
</>
);
// Pattern 3: Fragment explicit
return (
<React.Fragment>
<div>1</div>
<div>2</div>
</React.Fragment>
);
// Pattern 4: Array with keys
return [
<div key="1">1</div>,
<div key="2">2</div>
];
// Pattern 5: Container element
return (
<div>
<div>1</div>
<div>2</div>
</div>
);Invalid (will error):
// Missing wrapper
return
<div>1</div>
<div>2</div>
;
// Adjacent elements without Fragment
return <div>1</div> <div>2</div>;Choose the pattern that fits your use case.
Key Props in Arrays: React requires key props when returning arrays to properly track elements during re-renders. Without keys, React can't identify which array item corresponds to which DOM node, causing rendering bugs and state issues.
Performance Implications: Returning arrays vs Fragments has no performance difference. Fragments are preferred for cleaner syntax, while arrays are useful when you need explicit element tracking.
Conditional Rendering in Arrays: You can include conditionals inside array syntax, but be careful with null values:
return [
<div key="1">Item 1</div>,
condition && <div key="2">Conditional Item</div>,
<div key="3">Item 3</div>
].filter(Boolean);Server Components: In Next.js Server Components, Fragments and arrays both work the same way. The error is purely a syntax/type checking issue.
TypeScript: If using TypeScript, the return type should be JSX.Element | JSX.Element[] to properly type components that can return arrays.
React DevTools: When inspecting elements in React DevTools, Fragments don't appear in the component tree (they're not real elements), but array elements do show individually.
Legacy Class Components: In class component render() methods, the same rules apply: use Fragments or arrays to return multiple elements.
Prop spreading could cause security issues
Prop spreading could cause security issues
Error: error:0308010C:digital envelope routines::unsupported
Error: error:0308010C:digital envelope routines::unsupported
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.
React Hook useEffect placed inside a condition
Hook can only be called inside the body of a function component
Hook can only be called inside the body of a function component
Rollup failed to resolve import during build
How to fix "Rollup failed to resolve import" in React