Czy ktoś ma pomysł jak zrefactorować poniższą metode z wieloma if else? Komponent służy do wyrenderowania Selecta z różnymi opcjami w zależności jaki obiekt został przekazany do komponentu przez props.
render() {
const selectValue = this.state.selectValue;
const element = this.props.element;
const id = element.id;
let options;
if (id === 'location') {
options = element.items.map(option => {
const content = option.city + ', ' + option.country + ', ' + option.postCode;
return <Option option={option} content={content} />;
});
} else if (id === 'range') {
options = element.items.map(option => {
if (option.isRange) {
const content = option.currencySymbol + option.min + ' - ' + option.max + ' ' + option.type.name;
return <Option option={option} content={content} />;
} else {
const content = option.currencySymbol + option.value + ' ' + option.type.name;
return <Option option={option} content={content} />;
}
});
} else if (id === 'value') {
options = element.items.map(option => {
if (option.isRange) {
const content = option.min + ' - ' + option.max;
return <Option option={option} content={content} />;
} else {
const content = option.value;
return <Option option={option} content={content} />;
}
});
} else {
options = element.items.map(option =>
<Option option={option} content={option.name} />
);
}
return (
<div className={'form-group'}>
<label>{id}</label>
<select
value={selectValue}
onChange={this.handleTemplateChange}
className={'form-control'}
>
<option value={'default'} disabled>Select Template</option>
{options}
</select>
</div>
);
}