0
238
ViewsSeleccionar MUI | Cambiar cómo se muestra el valor seleccionado en Entrada
Tengo una matriz de objetos y quiero vincular varias propiedades del objeto en MenuItem pero quiero mostrar solo una propiedad para que se muestre en Select
En la imagen de arriba, muestra 10-xyz en la pantalla seleccionada, solo debería mostrar 10.
const [age, setAge] = React.useState(""); const [options, setOptions] = React.useState([ { name: "xyz", age: "10" }, { name: "xyz", age: "20" } ]); const handleChange = (event) => { setAge(event.target.value); }; return ( <Select labelId="demo-simple-select-label" id="demo-simple-select" value={age} label="Age" onChange={handleChange} > {options.map((ele) => { return(<MenuItem value={ele.age}> {`${ele.age}-${ele.name}`} </MenuItem>) })} </Select> ); }2 answers
Answer question0
Utilice renderValue prop para cambiar la forma en que Select debe mostrar el valor en el componente de Input :
<Select renderValue={(p) => p}Hay 2 problemas más en su código:
Debe pasar una
keyen suMenuItempara diferenciar entre cada uno de ellos en la lista. Ver esto para más explicación.Debe usar
TextFielden lugar deSelectsi desea mostrar unalabelpara suSelectcomo se explica en mi otra respuesta .
He solucionado ambos problemas en la demostración a continuación.
Para referencia, consulte la API Select aquí .
0
Estás concatenando ambas claves en el retorno:
Cambia desde:
{`${ele.age}-${ele.name}`}A esto:
{`${ele.age}`}