JavaScript

Nothing Was Returned from Render: What It Means and How to Fix It

Error reference

Nothing Was Returned from Render

Language

JavaScript

Severity

High

When it happens

React requires every function component to return a React element, null, or undefined.

Potential fixes

Add the return keyword before your JSX. For arrow function components, either use the parenthesis form (=> (...)) or add an explicit return inside the braces. Return null instead of undefined if the component should render nothing conditionally.

Deep dive

React requires every function component to return a React element, null, or undefined. This error is thrown when a component's render function returns nothing (undefined) because the JSX expression was written without a return statement.

Why it happens

•The return keyword is missing before JSX in a function component.
•An arrow function uses {} body syntax instead of () which requires an explicit return.
•A conditional render accidentally returns undefined on some code path.
•A component function has a missing return in a branch.

Potential fixes

Add the return keyword before your JSX. For arrow function components, either use the parenthesis form (=> (...)) or add an explicit return inside the braces. Return null instead of undefined if the component should render nothing conditionally.

Examples

JavaScript

Code that triggers the error

function Button({ label }) {
  // forgot return keyword
  <button>{label}</button>;
}

Error output

Error: Nothing was returned from render. This usually means a return statement is missing.

Fixed code

function Button({ label }) {
  return <button>{label}</button>;
}

Practice in English

How would you explain a Nothing Was Returned from Render to a fellow dev? Choose the right phrase:

"I hit an error...

Ready to practice your English at work?

Lingua-e has interactive exercises built around real developer conversations: standups, code reviews, retrospectives, and more. Practice until it comes naturally.

Try Lingua-e for free