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.
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.
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'>;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.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite