JIYIK CN >

The “Nothing was returned from render” React error occurs when we forget to explicitly return a value from a function or class component. To fix the error, explicitly return JSX from our component, use implicit returns with arrow functions, or return null if we don’t intend to return anything.

Here is the sample code that produces the above error

// ⛔️ 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 use an arrow function to define the component, but use curly braces instead of parentheses, so we don’t return anything from the App component.

When a function doesn't return a value, it returns undefined, which results in an error.

To fix this, make sure to return JSX from our component.

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

export default App;

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

If we intend to return anything from our component, we should return null.

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

export default App;

If our component performs some logic and does not need to render anything, make sure to return null, as implicitly or explicitly returning undefined will result in errors.

If you want to use implicit returns with arrow functions, make sure to use parentheses instead of curly braces.

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

The above example shows how to use implicit returns with arrow functions.

请注意, we use parentheses to wrap JSX code instead of curly braces.

We may also get an error if we explicitly use a return statement but put the brackets on the next line.

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

To fix this, put the opening bracket on the same line as the return statement.

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

If your opening bracket is placed on the next line, the engine thinks it is a return; followed by some unrelated code on the next line.

Therefore, we end up returning undefined, which results in a "Nothing was returned from render" error.

React components are just functions, so when we don’t return a value from a function, undefined is implicitly returned .

React considers null return values ​​ok, but if our function or class component returns undefined, it will throw an error.

Summarize

The “Nothing was returned from render” React error occurs when we forget to explicitly return a value from a function or class component. To fix the error, explicitly return JSX from your component, use implicit returns with arrow functions, or return null if you don’t intend to return anything.