Use a condition inside map() in React

avatar

Borislav Hadzhiev

Last updated: Apr 22, 2022

banner

Photo from Unsplash

Use a condition inside map() in React #

To use a condition inside map() in React:

  1. Call the map() method on an array.
  2. Use an if condition that explicitly returns if it's satisfied.
  3. Otherwise return a different value or return null to render nothing.
App.js
export default function App() { const arr = [1, 2, 3, 4, 5, 6]; return ( <div> {arr.map((element, index) => { if (element % 2 === 0) { return <h2 key={index}>{element}</h2>; } return <h2 key={index}>X</h2>; })} </div> ); }

We used the Array.map method to iterate over an array.

The function we passed to map() gets called with each element in the array and the index of the current iteration.

On each iteration, we check if the element is divisible by 2 and if it is, we return the element, otherwise, we return X.

If you want to render nothing in the else clause, you can return null.

App.js
export default function App() { const arr = [1, 2, 3, 4, 5, 6]; return ( <div> {arr.map((element, index) => { if (element % 2 === 0) { return <h2 key={index}>{element}</h2>; } // 👇️ render nothing return null; })} </div> ); }

The example renders the numbers that are divisible by 2, otherwise renders nothing.

Alternatively, you can use a ternary operator.

To use a condition inside map() in React:

  1. Call the map() method on an array.
  2. Use a ternary operator to check if the condition is truthy.
  3. The operator returns the value to the left of the colon if the condition is truthy, otherwise the value to the right is returned.
App.js
export default function App() { const arr = [1, 2, 3, 4, 5, 6]; return ( <div> {arr.map((element, index) => { return element % 2 === 0 ? ( <h2 key={index}>{element}</h2> ) : ( <h2 key={index}>X</h2> ); })} </div> ); }

We used a conditional ternary operator which is very similar to an if/else statement.

If the expression before the question mark evaluates to a truthy value, the value to the left of the colon is returned, otherwise the value to the right of the colon is returned.

In other words, if the element is divisible by 2, we return the element, otherwise return X.

Like in the previous example, if you want to return nothing in the else clause, you have to return null.

App.js
export default function App() { const arr = [1, 2, 3, 4, 5, 6]; return ( <div> {arr.map((element, index) => { return element % 2 === 0 ? <h2 key={index}>{element}</h2> : null; })} </div> ); }

We used the index for the key prop in the examples, however it's better to use a stable unique identifier if you have one.

The key prop is used internally by React for performance reasons. It helps the library make sure to only re-render the array elements that have changed.

Having said that, you won't see any noticeable difference unless you're dealing with many thousands of array elements.

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.