0
223
ViewsMUI Select | Change how the selected value display in Input
I have an array of objects and I want to bind multiple properties of object in MenuItem but I want to display only a single property to be displayed in Select
In Above image it is showing 10-xyz in select display, it should only show 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
Use renderValue prop to change how the Select should display the value in the Input component:
<Select renderValue={(p) => p}
There are 2 more problems in your code:
You should pass a
keyin yourMenuItemto differentiate between each of them in the list. See this for more explanation.You should use
TextFieldinstead ofSelectif you want to display alabelfor yourSelectas explained in my other answer.
I've fixed both issues in the demo below.
For reference, see the Select API here.
0
You're concatenating both keys in the return:
Switch from:
{`${ele.age}-${ele.name}`}
To this:
{`${ele.age}`}