How to return nothing from a React component

avatar

Borislav Hadzhiev

Last updated: Apr 22, 2022

banner

Photo from Unsplash

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.

App.js
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> ); }

render nothing react

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.

App.js
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.

App.js
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.

App.js
<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.

App.js
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 condition evaluates to false, so the logical AND (&&) operator returns false and nothing is rendered.

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.

App.js
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.

App.js
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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.