Nothing was returned from render
A component function resolved without returning any valid React element or null.
Usually happens because:
- ☑ Forgetting return keyword inside component body
- ☑ Stray curly braces in arrow functions
- ☑ Conditional branch missing default return
🔍 Quick Checklist:
📊 Where this usually happens (estimated occurrence)
What is Nothing was returned from render?
Every React component must return a valid React element, a fragment, an array, or null to indicate nothing should be rendered. Returning undefined (or omitting return keywords) triggers this error.
Common Causes
- Forgetting return statements inside components.
- Incorrect arrow function bodies containing curly braces without returns.
Common Mistakes
- Opening block scope brackets `{}` inside map loops returning components, but forgetting the return statement.
How to Fix
Framework-Specific Examples
No framework examples required for this informational status.
Wrong: Missing Return
function App() {
// Missing return statement
<div>Hello World</div>
}Correct: explicit return statement
function App() {
return <div>Hello World</div>;
}Best Practices
- Ensure all conditional code branches inside components return elements or `null`.
Frequently Asked Questions (FAQ)
Q: Can a component return null?
Yes. Returning `null` is a valid way to tell React to render nothing, preventing the error.
Q: What is the difference between explicit and implicit returns?
Implicit return (using parentheses: `() => (<div />)`) returns the value immediately. Explicit return (using curly braces: `() => { return <div />; }`) requires the `return` keyword.
Q: Can returning undefined ever be valid?
No. In React, returning `undefined` is considered a developer bug, and is blocked by the runtime.
Q: Does this error affect class components?
Yes. If the `render()` method of a class component does not return an element, the same error is thrown.