Nothing was returned from render Error in React [Solved]

# Table of Contents

1. Nothing was returned from render Error in React
2. How to return nothing from a React component

# 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.

# Return the JSX from your 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.

# Return null if you need to return nothing

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.

# Using an implicit return with arrow functions

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>
);

export default App;

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.

# Place your parentheses on the same line as the return statement

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 the 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.

# Return nothing from a React component

To return nothing from a React component, simply return null. When null is returned from a React component, nothing gets rendered.

Copied!
import {useState} from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  if (count > 3) {
    return null;
  }

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>

      <h2>Count: {count}</h2>
    </div>
  );
}

The condition in the example checks for the value of the count state variable and if it's greater than 3, it returns null.

If you return null from a component, nothing is rendered.

You can also return null to render nothing from a JSX expression.

Copied!
export default function App() {
  const str = 'bye';

  return (
    <div>
      {str.length === 2 ? (
        <div>
          <h2>hello world</h2>
        </div>
      ) : null}

      <h3>Something else</h3>
    </div>
  );
}

We used a ternary operator to check if the length of the str variable is 2.

The ternary operator is very similar to an if/else statement.

If the value to the left of the question mark is truthy, the operator returns the value to the left of the colon, otherwise the value to the right of the colon is returned.

Copied!
const result1 = 5 === 5 ? 'yes' : 'no';
console.log(result1); // 👉️ "yes"

const result2 = 5 === 10 ? 'yes' : 'no';
console.log(result2); // 👉️ "no"

If the string bye has a length of 2 characters, we return the DOM elements, otherwise null is returned.

Booleans, null and undefined are ignored. They simply don't render.

The following JSX expressions all render nothing.

Copied!
<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

This behavior is often used to render something only if a condition is met.

Copied!
export default function App() {
  const str = 'bye';

  return (
    <div>
      {str.length === 2 && (
        <div>
          <h2>hello world</h2>
        </div>
      )}

      <h3>Something else</h3>
    </div>
  );
}

The logical AND (&&) operator returns the value to the left if it's falsy, otherwise the value to the right is returned.

The falsy values in JavaScript are: null, undefined, 0, false, "" (empty string), NaN (not a number).

Notice that 0 is a falsy value, so if you try to conditionally check for an array's length using logical AND (&&), you might end up rendering a 0.

Copied!
export default function App() {
  const arr = [];

  return (
    <div>
      {arr.length && (
        <div>
          <h2>hello world</h2>
        </div>
      )}

      <h3>Something else</h3>
    </div>
  );
}

If you load the example, you'll see that it renders 0. The reason being - 0 is a falsy value, so it gets returned from the logical AND (&&) operator.

One way to get around this is to explicitly check if the array's length is greater than 0.

Copied!
export default function App() {
  const arr = [];

  return (
    <div>
      {arr.length > 0 && (
        <div>
          <h2>hello world</h2>
        </div>
      )}

      <h3>Something else</h3>
    </div>
  );
}

The example above won't render anything because the array's length is 0. This is the expected behavior.