Estoy tratando de seleccionar un campo de texto según el tipo de variable seleccionado y no quiero usar el componente de campo de texto en todas las condiciones de la suite.
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();Una forma es:
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> );
default: return ( <TextField size='small' variant="outlined" defaultValue={value} onChange={(e) => onChangeProp('value', e.target.value)} {...['Date', 'number'].includes(type) && {inputProps: {type}}} /> );
} }