JSX：map 中的条件语句

Question

I'm trying to understand how to incorporate conditional statements within JSX. I have an array of objects that I'm mapping to a select box. I want to exclude items that include the substring "threshold" in indicator.name.

So I can't use a ternary operator, because there's no "or" item. But I can't figure out how to include an if statement within this map. Whatever I try I get an error.

 <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

you can filter then map:

<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>

Or return null:

<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

I would recommend using the filter method to filter out "threshold". This would return the array you are expecting to have inside JSX