JSX: условный оператор на карте

Question

Я пытаюсь понять, как включить условные выражения в JSX. У меня есть массив объектов, которые я сопоставляю с полем выбора. Я хочу исключить элементы, которые включают подстроку «threshold» в display.name.

Поэтому я не могу использовать троичный оператор, потому что нет элемента «или». Но я не могу понять, как включить оператор if в эту карту. Что бы я ни пытался, я получаю ошибку.

<select
  defaultValue={defaultValue}
  onChange={e => setIndicator(e.currentTarget.value)}
  disabled={loading}
>
  <option key='' value=''>
    Select
  </option>
  {indicatorList.map(indicator => (
    <option key={indicator.name} value={indicator.name}>
      {indicator.label}
    </option>
  ))}
</select>

Answer 1

Вы можете отфильтровать затем карту:

<select
  defaultValue={defaultValue}
  onChange={e => setIndicator(e.currentTarget.value)}
  disabled={loading}
>
  <option key='' value=''>
    Select
  </option>
  {indicatorList.filter(indicator=>indicator.name.includes('threshold')).map(indicator => (
    <option key={indicator.name} value={indicator.name}>
      {indicator.label}
    </option>
  ))}
</select>

Или вернуть ноль:

<select
  defaultValue={defaultValue}
  onChange={e => setIndicator(e.currentTarget.value)}
  disabled={loading}
>
  <option key='' value=''>
    Select
  </option>
  {indicatorList.map(indicator => (
    indicator.name.includes('threshold')?<option key={indicator.name} value={indicator.name}>:nul
      {indicator.label}
    </option>
  ))}
</select>

Answer 2

Я бы порекомендовал использовать метод фильтра для фильтрации "порога". Это вернет массив, который вы ожидаете иметь внутри JSX