How to render the desired field in the select?

Question

React

Hello. Guys help with an idea.
I have data about tariff plans, they come from the back.
He has a property active, it is true || false.
I have a lot of selects on my site and there is a common class

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

I need something that if active === true, then I would display the field in the select, and if false, then not.
That's exactly what I did

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

But other fields in the selects that I have are not displayed, because I return ''.
Here is an example of data:
1. For tariffs

2. For another one

Please tell me how you can solve this situation?

Answer 1

with a strict equality check, an empty string will be only if there is an active property and it is false

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

Answer 2

You need to add a check for undefined to the condition

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