How to fix Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. in React

ReactBEGINNERHIGHUpdated Dec 9, 2025· 136 views

React throws this error when a component's render() method or function component returns undefined instead of valid JSX, null, or other renderable values. This typically happens due to missing return statements or incorrect arrow function syntax.

Quick fix

Fixes Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

// ❌ WRONG - No return statement
class MyComponent extends React.Component {
  render() {
    <div>Hello World</div>
  }
}

// ✅ CORRECT - Explicit return
class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

// ✅ CORRECT - Return null if intentionally rendering nothing
class MyComponent extends React.Component {
  render() {
    if (!this.props.show) {
      return null;
    }
    return <div>Hello World</div>;
  }
}

Add explicit return statement to class components
Fix arrow function syntax in function components
Fix return statement placement
Ensure all code paths return a value

react — error

$// ❌ WRONG - No return statement
class MyComponent extends React.Component {
  render() {
    <div>Hello World</div>
  }
}
// ✅ CORRECT - Explicit return
class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}
// ✅ CORRECT - Return null if intentionally rendering nothing
class MyComponent extends React.Component {
  render() {
    if (!this.props.show) {
      return null;
    }
    return <div>Hello World</div>;
  }
}
Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

What this error means

This error occurs when React tries to render a component but receives `undefined` from the component's render function. React expects components to return one of several valid values: JSX elements, strings, numbers, arrays, fragments, portals, booleans, null, or undefined (in React 18+). The error most commonly appears in class components when the `render()` method doesn't explicitly return a value, or in function components when using arrow function syntax with curly braces but forgetting the return statement. React distinguishes between intentionally rendering nothing (returning `null`) and accidentally returning nothing (returning `undefined`). In React versions prior to 18, returning `undefined` always threw this error. React 18 made this slightly more lenient, but the error still appears in most cases where a return value is genuinely missing.

Typical symptoms

Application crashes with "Nothing was returned from render" error message
Component fails to render without displaying any content
Error appears in the browser console pointing to a specific component
Red error overlay appears in development mode
TypeScript may show "not all code paths return a value" warning

Common causes

Missing return statement in class component render() method
Arrow function component using curly braces without explicit return
Return statement on separate line with opening parenthesis below it (automatic semicolon insertion)
Conditional rendering that doesn't return anything in some branches
Accidentally using a statement instead of an expression in arrow function
Function body has side effects but no return statement

How to fix "Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."

1Add explicit return statement to class components

For class components, ensure the render() method explicitly returns JSX or null:

jsx

// ❌ WRONG - No return statement
class MyComponent extends React.Component {
  render() {
    <div>Hello World</div>
  }
}

// ✅ CORRECT - Explicit return
class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

// ✅ CORRECT - Return null if intentionally rendering nothing
class MyComponent extends React.Component {
  render() {
    if (!this.props.show) {
      return null;
    }
    return <div>Hello World</div>;
  }
}

2Fix arrow function syntax in function components

Function components using arrow functions must either use implicit return (parentheses) or explicit return (curly braces with return statement):

jsx

// ❌ WRONG - Curly braces without return
const MyComponent = () => {
  <div>Hello World</div>
};

// ✅ CORRECT - Implicit return with parentheses
const MyComponent = () => (
  <div>Hello World</div>
);

// ✅ CORRECT - Explicit return with curly braces
const MyComponent = () => {
  return <div>Hello World</div>;
};

// ✅ CORRECT - Single line implicit return
const MyComponent = () => <div>Hello World</div>;

3Fix return statement placement

Ensure opening parentheses or JSX is on the same line as the return statement to avoid automatic semicolon insertion:

jsx

// ❌ WRONG - JavaScript inserts semicolon after return
function MyComponent() {
  return
    <div>Hello World</div>;
}
// This becomes: return; <div>Hello World</div>;

// ✅ CORRECT - Opening tag on same line
function MyComponent() {
  return <div>
    Hello World
  </div>;
}

// ✅ CORRECT - Opening parenthesis on same line
function MyComponent() {
  return (
    <div>
      Hello World
    </div>
  );
}

4Ensure all code paths return a value

Check conditional rendering to make sure every branch returns something:

jsx

// ❌ WRONG - Some paths don't return anything
function MyComponent({ isLoggedIn }) {
  if (isLoggedIn) {
    return <div>Welcome back!</div>;
  }
  // Missing return for false case
}

// ✅ CORRECT - All paths return
function MyComponent({ isLoggedIn }) {
  if (isLoggedIn) {
    return <div>Welcome back!</div>;
  }
  return <div>Please log in</div>;
}

// ✅ CORRECT - Ternary operator ensures return
function MyComponent({ isLoggedIn }) {
  return isLoggedIn ? (
    <div>Welcome back!</div>
  ) : (
    <div>Please log in</div>
  );
}

5Check for accidental expressions vs statements

Ensure you're not trying to use statements (like variable declarations) as the return value:

jsx

// ❌ WRONG - Variable declaration doesn't return anything
const MyComponent = () => {
  const element = <div>Hello</div>;
};

// ✅ CORRECT - Return the variable
const MyComponent = () => {
  const element = <div>Hello</div>;
  return element;
};

// ✅ CORRECT - Return JSX directly
const MyComponent = () => {
  return <div>Hello</div>;
};

Advanced notes

TypeScript Integration: TypeScript can catch many of these issues at compile time. Enable strict mode and the noImplicitReturns compiler option to get warnings when not all code paths return a value. Type your function components with React.FC or explicit return types to ensure proper return values.

React 18 Changes: React 18 allows components to return undefined in some contexts, making the framework more lenient. However, relying on this behavior is discouraged as it makes intent unclear. Always explicitly return null if you intend to render nothing.

ESLint Rules: Use eslint-plugin-react with the react/require-render-return rule enabled to catch missing return statements in class component render methods during development.

Performance Consideration: Returning null is more performant than returning an empty fragment <></> or empty div when you don't want to render anything, as React can skip reconciliation entirely.

Common Pitfall with Array Methods: When using .map() or .filter() to render lists, make sure you're returning JSX from the callback:

jsx

// ❌ WRONG - Curly braces without return
const List = ({ items }) => (
  <ul>
    {items.map(item => {
      <li key={item.id}>{item.name}</li>
    })}
  </ul>
);

// ✅ CORRECT
const List = ({ items }) => (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

Frequently asked questions

What does "Nothing was returned from render. This usually means a return statemen" mean?: This error occurs when React tries to render a component but receives undefined from the component's render function. React expects components to return one of several valid values: JSX elements, strings, numbers, arrays, fragments, portals, booleans, null, or undefined (in React 18+). The error most commonly appears in class components when the render() method doesn't explicitly return a value, or in function components when using arrow function syntax with curly braces but forgetting the return statement.
How do I fix "Nothing was returned from render. This usually means a return statemen"?: React throws this error when a component's render() method or function component returns undefined instead of valid JSX, null, or other renderable values. This typically happens due to missing return statements or incorrect arrow function syntax.
What causes "Nothing was returned from render. This usually means a return statemen"?: Missing return statement in class component render() method Arrow function component using curly braces without explicit return Return statement on separate line with opening parenthesis below it (automatic semicolon insertion)
Is the "Nothing was returned from render. This usually means a return statemen" error serious?: Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Official resources & further reading

📚React Official Documentation