How to fix Warning: This element (component) does not expect children in React
This React warning appears when you pass child elements to components or HTML tags that don't accept them, such as void elements like <img>, <input>, or <br>. Self-closing tags in React must not contain any content between opening and closing tags.
Quick fix
Fixes Warning: This element (component) does not expect children
<img src="photo.jpg">Image</img>
<input type="text">Enter text</input>
<br>New line</br>- Identify void elements in your code
- Convert void elements to self-closing syntax
- For custom components, check if they accept children
- Update TypeScript types if needed
<img src="photo.jpg">Image</img><input type="text">Enter text</input><br>New line</br>Warning: This element (component) does not expect children
What this error means
React displays this warning when you attempt to nest content inside elements that are designed to be self-closing. Void elements in HTML (like <img />, <input />, <br />, <hr />, etc.) are inherently empty and cannot have children. Similarly, if you create a custom component that doesn't handle or expect the children prop, React will warn you when children are passed to it. This warning helps catch common mistakes that would result in invalid HTML or unexpected rendering behavior.
Typical symptoms
- Console warning: 'Warning: This element (component) does not expect children'
- Void elements like <img> or <input> contain text or nested elements between opening and closing tags
- Custom components don't render children even though you're passing them
- Your component structure looks correct but triggers React warnings
Common causes
- Using void HTML elements with opening and closing tags instead of self-closing syntax (e.g., <img>text</img> instead of <img />)
- Passing children to custom components that don't define or use the children prop
- Forgetting to add the self-closing forward slash in JSX syntax
- Misunderstanding which HTML elements are void elements that cannot have children
- Using deprecated HTML syntax where you forgot that certain elements must be self-closing
How to fix "Warning: This element (component) does not expect children"
Locate all instances of void HTML elements in your JSX. The most common void elements are:
- <img>
- <input>
- <br>
- <hr>
- <meta>
- <link>
- <area>
- <base>
- <col>
- <command>
- <embed>
- <keygen>
- <param>
- <source>
- <track>
- <wbr>
In JSX, all void elements must use self-closing syntax with a forward slash before the closing angle bracket. This is different from standard HTML.
Incorrect (causes warning):
<img src="photo.jpg">Image</img>
<input type="text">Enter text</input>
<br>New line</br>Correct (self-closing):
<img src="photo.jpg" />
<input type="text" />
<br />If you're using a custom component (not an HTML element), verify whether it's designed to accept children:
If you want the component to accept children, define the children prop:
function MyComponent({ children }) {
return <div>{children}</div>;
}
// Now you can use it with children
<MyComponent>This works</MyComponent>If the component shouldn't have children, don't pass any:
function Badge({ label }) {
return <span className="badge">{label}</span>;
}
// Correct usage - no children
<Badge label="New" />If using TypeScript with polymorphic components (components that can render different HTML elements), you can prevent children being passed to void elements at compile time:
interface PolymorphicProps<T extends React.ElementType> {
as?: T;
children?: React.ReactNode;
}
// For void elements, omit the children prop
type VoidElementProps = Omit<PolymorphicProps<'img'>, 'children'>;Advanced notes
React vs HTML Syntax Difference: In standard HTML, you can sometimes omit the forward slash in self-closing tags (e.g., <img> instead of <img />), but in JSX, the forward slash is required. This is because JSX is stricter about XML syntax compliance.
ESLint Rules: If you want to enforce this pattern across your codebase, use ESLint rules like no-void-elements-with-children from eslint-plugin-react to catch these issues during linting rather than waiting for runtime warnings.
Custom Components and TypeScript: When building components with an as prop for polymorphic rendering, TypeScript can help prevent children from being passed to void elements at compile time, catching the issue before it becomes a runtime warning.
Fragment vs Wrapper Div: If you're trying to pass multiple children to a component that doesn't support them, you might need to wrap them in a Fragment (<>...</>) or another container component.
Frequently asked questions
- What does "Warning: This element (component) does not expect children" mean?
- React displays this warning when you attempt to nest content inside elements that are designed to be self-closing. ) are inherently empty and cannot have children. Similarly, if you create a custom component that doesn't handle or expect the children prop, React will warn you when children are passed to it.
- How do I fix "Warning: This element (component) does not expect children"?
- This React warning appears when you pass child elements to components or HTML tags that don't accept them, such as void elements like <img>, <input>, or <br>. Self-closing tags in React must not contain any content between opening and closing tags.
- What causes "Warning: This element (component) does not expect children"?
- Using void HTML elements with opening and closing tags instead of self-closing syntax (e.g., <img>text</img> instead of <img />) Passing children to custom components that don't define or use the children prop Forgetting to add the self-closing forward slash in JSX syntax
- Is the "Warning: This element (component) does not expect children" error serious?
- It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.