Условный рендеринг в функции карты React.js: методы и примеры

В React.js функция mapобычно используется для перебора массива и создания нового массива с преобразованными или измененными элементами. Если вы хотите условно отображать элементы внутри функции map, вы можете использовать несколько подходов.

  1. Использование оператора if. Вы можете использовать обычный оператор ifвнутри функции mapдля условной визуализации элементов на основе определенного условия. Вот пример:
const array = [1, 2, 3, 4, 5];
const newArray = array.map((item) => {
  if (item % 2 === 0) {
    return <div>{item} is even</div>;
  } else {
    return <div>{item} is odd</div>;
  }
});
  1. Использование тернарного оператора: Тернарный оператор (условие ? выражение1 : выражение2) можно использовать для достижения условного рендеринга в функции map. Вот пример:
const array = [1, 2, 3, 4, 5];
const newArray = array.map((item) => (
  <div>{item} is {item % 2 === 0 ? 'even' : 'odd'}</div>
));
  1. Фильтрация массива. Другой подход — использовать метод filterперед функцией map, чтобы создать новый массив, содержащий только те элементы, которые соответствуют определенному условию. Вот пример:
const array = [1, 2, 3, 4, 5];
const newArray = array
  .filter((item) => item % 2 === 0)
  .map((item) => <div>{item} is even</div>);

Это три распространенных подхода к условному рендерингу элементов в функции mapв React.js.