How to get select option label in addition to its value in react antd form?

Question

I used antd-form-builder to create a form. The form contains select field (dropdown). I used form.getFieldValue("task") to get the value of selected option, I also need to get the label of selected option. how can I get it by clicking on a button?

 const meta = (
    fields: [
    {
            key: "task",
            label: "Task",
            widget: "select",
            widgetProps: { showSearch: true },
            options: [
              { label: "Pre-filter Replacement", value: 1 },
              { label: "Oil Change", value: 2 },
            ],
          },
    ]
 )
 const handleClick = () => {
    let taskValue = form.getFieldValue("task")
 }

<Form form={form} onValuesChange={forceUpdate} onFinish={onFinish}>
  <FormBuilder meta={meta} form={form} />
  <Button onClick={handleClick}>Done</Button>
</Form>

Answer 1

You can use labelInValue prop to get the value along with selected option label. Pass labelInValue: true, in widgetProps

 const meta = {
    fields: [
      {
        key: "task",
        label: "Task",
        widget: "select",
        widgetProps: {
          showSearch: true,
          labelInValue: true,
        },
        options: [
          { label: "Pre-filter Replacement", value: 1 },
          { label: "Oil Change", value: 2 },
        ],
      },
    ],
  };

Now task value will not be a number buy an object containing label, value, key, disabled.

You can follow the Select API Documentation