Nothing was returned from render Error in React

Nothing was returned from render Error in React #

The "Nothing was returned from render" React error occurs when we forget to explicitly return a value from a function or class component. To solve the error, explicitly return JSX from your component, use implicit return with an arrow function or return null if you meant to return nothing.

Here is an example of how the error occurs.

Copied!
// ⛔️ Error: Error: App(...): Nothing was returned
// from render. This usually means a return statement is missing.
const App = () => {
  <div>Hello world</div>; // 👈️ forgot to use `return`
};

export default App;

We used an arrow function to define a component but used curly braces instead of parentheses, so we returned nothing from the App component.

To solve this, make sure to return the JSX from your component.

Copied!
const App = () => {
  return <div>Hello world</div>;
};

export default App;

The example above uses a return statement to explicitly return some JSX from a function component.

If you meant to return nothing from the component, you should return null instead.

Copied!
const App = () => {
  return null;
};

export default App;

If your component performs some logic and does not need to render anything, make sure to return null, because implicitly or explicitly returning undefined causes the error.

If you want to use an implicit return with an arrow function, make sure to use parentheses instead of curly braces.

Copied!
const App = () => (
  <div>
    <div>Hello world</div>
  </div>
);

The example above shows how to use an implicit return with an arrow function. Note that we use parentheses to wrap the JSX code and not curly braces.

You might also get the error if you explicitly use a return statement, but put the parentheses on the next line.

Copied!
function App() {
  return
    ( // 👈️ parentheses should be on same line with return()
      <div>
        <div>Hello world</div>
      </div>
    )
}
export default App;

To solve this, place the opening parenthesis on the same line as your return statement.

Copied!
function App() {
  return (
    <div>
      <div>Hello world</div>
    </div>
  );
}
export default App;

If your opening parenthesis is placed on the next line, the engine considers it as return; and then some unrelated code on the next line.

React components are just functions, so when you don't return a value from a function, you implicitly return undefined.

React considers a null return value okay, but if your function or class components return undefined, an error is thrown.

Conclusion #

The "Nothing was returned from render" React error occurs when we forget to explicitly return a value from a function or class component. To solve the error, explicitly return JSX from your component, use implicit return with an arrow function or return null if you meant to return nothing.