MUI Select | Change how the selected value display in Input-CodePudding

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

CodePudding user response：

Use renderValue prop to change how the Select should display the value in the Input component:

<Select renderValue={(p) => p}

For reference, see the Select API

CodePudding user response：

You're concatenating both keys in the return:

Switch from:

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

To this:

{`${ele.age}`}