JIYIK CN >

Using map()the conditional in React:

1. Calls the method on the array map().
2. Use the condition that explicitly returns if it is met if.
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 use Array.mapthe method to iterate over an array.

The function we pass to is map()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 yes then we return the element, otherwise we return X.

If you don't want elseto render anything in the 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 三元运算符.

Using conditions in map() in React:

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

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 operatorif/else 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 , then return the element, otherwise return X.

As in the previous example, elsewe must return if we want to return nothing in the if clause 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 the index of the prop in the example key, but if you have a stable unique identifier, it is better to use that.

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

That being said, unless we are dealing with thousands of array elements we won't see any noticeable difference.