How i can shorten the following switch case condition?

Viewed 44

I'm trying to select a text field depending on the selected variable type and I don’t want to use the textfield component in every suite condition.

const setInputType = () => {
        switch (type) {
            case 'boolean':
                return <Select size='small' defaultValue='True' onChange={(e) => onChangeProp('value', e.target.value)}>
                    <MenuItem value='True'>True</MenuItem>
                    <MenuItem value='False'>False</MenuItem>
                </Select>;
            case 'array':
                return <TextField
                    size='small'
                    variant="outlined"
                    defaultValue={[...value]}
                    onChange={(e) => onChangeProp('value', e.target.value)}
                />;
            case 'Date':
                return <TextField
                    size='small'
                    variant="outlined"
                    inputProps={{ type: 'Date' }}
                    defaultValue={value}
                    onChange={(e) => onChangeProp('value', e.target.value)}
                />;
            case 'number':
                return <TextField
                    size='small'
                    variant="outlined"
                    inputProps={{ type: 'number' }}
                    defaultValue={value}
                    onChange={(e) => onChangeProp('value', e.target.value)}
                />;
            default:
                return <TextField
                    size='small'
                    variant="outlined"
                    defaultValue={value}
                    onChange={(e) => onChangeProp('value', e.target.value)}
                />;
        }
    }

    const inputType = setInputType();
1 Answers

One way is :

const setInputType = () => {
        switch (type) {
            case 'boolean':
                return (
                    <Select size='small' defaultValue='True' onChange={(e) => onChangeProp('value', e.target.value)}>
                        <MenuItem value='True'>True</MenuItem>
                        <MenuItem value='False'>False</MenuItem>
                    </Select>
                );
            case 'array': // intentional fallback for explicit listing
            case 'Date':
            case 'number':
            default:
                return (
                    <TextField
                        size='small'
                        variant="outlined"
                        defaultValue={value}
                        onChange={(e) => onChangeProp('value', e.target.value)}
                        {...['Date', 'number'].includes(type) && {inputProps: {type}}}
                    />
                );
    }
}
Related