Всем привет. Ребят помогите идеей.
Есть у меня данные про тарифные планы, приходят с бека.
У него есть проперти
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. На другом
Подскажите пожалуйста как можна решить данную ситуацию?
