javascriptreactjsantd

Selected value in AntD Select

I'm using the AntD select component, and as you can see in the attached image, when selecting any of its options, AntD select displays "id" rather than "name." Is there a fix for this?

const MyComponent = () => {
    const data = [
      {
        id: "5c83c2d0-e422-4eb6-b2cb-02fe60045e6e"
        name: "Item 1"
      },
      {
        id: "1b9175f9-750a-48c1-bbf7-0ff9a2fde7da"
        name: "Item 2"
      }
    ];

    return (
       <Select>
            {data.map((item) => (
                <Option value={item.id} key={item.id}>{item.name}</Option>
            )}
       </Select>
    );
};

enter image description here

Solution

  • The Ant design <Option> has a prop named label to alter the shown text.

    So instead of passing item.name as a child components, pass it as the label prop:

    return (
   <Select>
        {data.map(item => (
            <Option value={item.id} key={item.id} label={item.name} />
        )}
   </Select>
);