Using a condition inside map() in React

# Table of Contents

1. Use a condition inside map() in React
2. Break a map() loop (map() only part of Array) in React

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

Copied!
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.

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 get the error that map() is not a function in React, click on the link and follow the instructions.

# Return null if you don't need to render anything

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

Copied!
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.

# Use a condition inside map() using the ternary operator

This is a three-step process:

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.

Copied!
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.

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.

Copied!
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.

Make sure you don't have duplicate keys, otherwise, you'll get the Encountered two children with the same key warning.

Note that you shouldn't try to access the key property, otherwise, the warning Key is not a prop. Trying to access it will result in undefined is raised.

# Break a map() loop (map() only part of Array) in React

To break a map() loop:

1. Call the slice() method on the array to get a portion of the array.
2. Call the map() method on the portion of the array.
3. Iterate over the portion of the array.

Copied!
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Delilah', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  // 👇️ map() first 2 elements of array

  return (
    <div>
      {employees.slice(0, 2).map((employee, index) => {
        return (
          <div key={index}>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

The Array.slice() method doesn't modify the original array, instead, it creates a new array (a shallow copy of the original array).

We passed the following 2 parameters to the slice() method:

We specified a start index of 0 and an end index of 2, so we got a portion of the array with elements 0 and 1.

Copied!
const arr = ['a', 'b', 'c'];

const first100 = arr.slice(0, 100);
console.log(first100); // 👉️ ['a', 'b', 'c']

We tried to get the first 100 elements of an array, which only contains 3 elements.

As a result, the new array contains all 3 elements of the original array.

# Map() only a part of an array using filter()

You can also use the Array.filter() method before calling map().

Copied!
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Delilah', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  // 👇️ map() LAST 2 elements of array

  return (
    <div>
      {employees
        .filter(employee => {
          return (
            employee.country === 'Belgium' ||
            employee.country === 'Denmark'
          );
        })
        .map((employee, index) => {
          return (
            <div key={index}>
              <h2>name: {employee.name}</h2>
              <h2>country: {employee.country}</h2>

              <hr />
            </div>
          );
        })}
    </div>
  );
}

The function we passed to the filter() method gets called with each element in the array.

On each iteration, we check if the current object has a country property equal to Belgium or Denmark and return the result.

In the example, the map() method is only called with the objects with id of 2 and 4.