JIYIK CN >

Using conditions in map() in React:

1. Calls the method on the array map().
2. Use ifa condition to explicitly return if the condition is met.
3. Otherwise return a different value or return nullto render nothing.

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 Array.mapiterate over an array using the method.

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

In each iteration, we check if the element is divisible by 2, if so, we return the element, otherwise, we return X.

If you don't need to render anything, return null

If you don't want to render anything in the else clause, you can return null.

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 numbers that are divisible by 2 and renders nothing otherwise.

Alternatively, we can use the ternary operator.

Using ternary operator with conditions in map()

This is a three-step process:

1. Calls the method on the array map().
2. Use the ternary operator to check if a condition is true.
3. The operator returns the value on the left of the colon if the condition is true, otherwise it returns the value on the right.

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 if/elsea conditional ternary operator very similar to the statement.

If the expression before the question mark evaluates to true, then 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 we return X.

As in the previous example, if you want to return nothing in the else clause, you must return null.

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 an index for the key prop in our examples, however, it is better to use a stable unique identifier if available.

React uses the key prop internally for performance reasons. It helps the library ensure that only changed array elements are re-rendered.

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

Breaking out of map() loops in React (map() is just a slice of an array)

To break out of the map() loop:

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

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Jiyik', country: 'China'},
    {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>
  );
}

Array.slicemethod does not modify the original array, but creates a new array (a shallow copy of the original array).

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

• startIndex The index of the first element to be included in the new array
• endIndex up, but not including this index

We specified a starting index of 0 and an ending index of 2, so we get the portion of the array that contains elements 0 and 1.

Even if the end index we provide to Array.slicethe method exceeds the length of the array, the method will not throw an error but return all the array elements.

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

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

We are trying to get the first 100 elements of an array which contains only 3 elements.

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

Map() is just a part of the array, use filter()

We can also map()use Array.filterthe method before calling .

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Jiyik', country: 'China'},
    {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 pass to filter()the method is called for each element in the array.

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

filter()The method returns an array containing only those elements for which the callback function returns a true value.

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