Как рендерить нужный филд в селекте?

Question

[WarriorKodeK]

Всем привет. Ребят помогите идеей.
Есть у меня данные про тарифные планы, приходят с бека.
У него есть проперти active, оно true || false.

У меня на сайте есть много селектов и есть общий класс

class SimpleSelect extends React.Component {
  _renderOptions = (options) => {
    return options.map((op, i) => {
        return <MenuItem
          key={i}
          style={this.props.style}
          value={op.value}
        > {op.label} </MenuItem>
      }
    })
  }

  render() {
    const {
      reducer,
      reducer: {
        errors,
        actionType,
      },
      options = [],
      id,
      onChange,
      classes,
      style = {},
      onChangeCustom,
      label,
      ...props
    } = this.props;
    const value = get(reducer, id, '');
    const error = get(errors, id, false);
    const onChangeFinal = onChangeCustom || onChange;
    return (
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor={id}>{label}</InputLabel>
        <Select
          value={value}
          name={actionType}
          onChange={({ target: { value } }) => onChangeFinal({ target: { name: actionType, value, id } })}
          input={<Input style={[classes.textField, style]} id={id} />}
          {...omit(props, ['dispatch', 'onChange'])}
        >
          {this._renderOptions(options)}
        </Select>
        {
          error && <FormHelperText>{error}</FormHelperText>
        }
      </FormControl>
    )
  }
}

Мне надо, что-бы если active === true, то у меня отображался б филд в селекте, а если false то нет.
Я так и сделал

return options.map((op, i) => {
        return op.active ?   <MenuItem
          key={i}
          style={this.props.style}
          value={op.value}
        > {op.label} </MenuItem> : ''
 }

Но другие филды в селектах что есть у меня не отображаются, потому как я возвращаю ''.

Вот пример данных:
1. На тариффы


2. На другом


Подскажите пожалуйста как можна решить данную ситуацию?

Answer 1

[Анатолий Жаров]

при строгой проверке на равенство пустая строка будет только если есть свойство active и оно false

return options.map((op, i) => {
    return op.active === false ? '' : <MenuItem
        key={i}
        style={this.props.style}
        value={op.value}
    > {op.label} </MenuItem>
}

Comments

[WarriorKodeK]

Спасибо вам. Вот я тупой(

Answer 2

[Максим]

Нужно добавить в условие проверку на undefined

return options.map((op, i) => {
  if (typeof op.active !== undefined) {
    return op.active ? <MenuItem
      key={i}
      style={this.props.style}
      value={op.value}
    > {op.label} </MenuItem> : ''
  }
  return <MenuItem
    key={i}
    style={this.props.style}
    value={op.value}
  > {op.label} </MenuItem>
}

Comments

[WarriorKodeK]

Также(

Те филды что зависят от active отображаются, другие нет((

https://prnt.sc/jl3sy4