MUI Select | Change how the selected value display in Input

Question

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>
  );
}

Answer 1

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:

1. You should pass a key in your MenuItem to differentiate between each of them in the list. See this for more explanation.

2. You should use TextField instead of Select if you want to display a label for your Select as explained in my other answer .

I've fixed both issues in the demo below.

For reference, see the Select API here .

Answer 2

You're concatenating both keys in the return:

Switch from:

{`${ele.age}-${ele.name}`}

To this:

{`${ele.age}`}