При работе с React обычно используется метод `map()` для отображения списка элементов. Однако иногда вы можете захотеть условно отображать определенные элементы на основе некоторых критериев. В этом руководстве мы рассмотрим, как использовать условие внутри `map()` в React.

Использование тернарного оператора

Один из способов условно отобразить элементы внутри `map()` — использовать тернарный оператор. Основной синтаксис тернарного оператора следующий:

condition ? expressionIfTrue : expressionIfFalse

Чтобы использовать это внутри `map()`, мы можем сделать что-то вроде этого:

const items = [
  { name: 'Item 1', type: 'type1' },
  { name: 'Item 2', type: 'type2' },
  { name: 'Item 3', type: 'type1' },
  { name: 'Item 4', type: 'type2' },
];

const itemList = items.map((item, index) => (
  item.type === 'type1' ? <div key={index}>{item.name}</div> : null
));

return <div>{itemList}</div>;

В этом примере у нас есть массив элементов со свойствами `name` и `type`. Мы хотим отображать только элементы с типом, равным type1. Внутри `map()` мы используем тернарный оператор, чтобы проверить, является ли тип элемента `'type1'`. Если это так, мы возвращаем элемент `div` с именем элемента. Если нет, мы возвращаем `null`.

Использование функции

Другой способ условно отображать элементы внутри `map()` — использовать функцию. Эта функция должна возвращать элемент JSX, если условие истинно, и `null`, если оно ложно. Вот пример:

const items = [
  { name: 'Item 1', type: 'type1' },
  { name: 'Item 2', type: 'type2' },
  { name: 'Item 3', type: 'type1' },
  { name: 'Item 4', type: 'type2' },
];

function renderItems(item) {
  if (item.type === 'type1') {
    return <div>{item.name}</div>;
  }
  return null;
}

const itemList = items.map((item, index) => renderItems(item, index));

return <div>{itemList}</div>;

В этом примере мы определяем функцию с именем `renderItems()`, которая принимает элемент в качестве аргумента. Внутри функции мы проверяем, является ли тип элемента `'type1'`. Если это так, мы возвращаем элемент `div` с именем элемента. Если нет, мы возвращаем `null`.

Внутри `map()` мы вызываем функцию `renderItems()` для каждого элемента в массиве. Это вернет либо элемент `div`, либо `null`, в зависимости от типа элемента.

Заключение

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