2

I am using select in the 'antd' (Ant Design) library. The selected option is showing the value of the option instead of the the label when using an onChange Handler.

I am adding the working example sandbox. In the example I have commented out the onChange in DATA1 so it works as expected.

 <Select        
        // onChange={(key, val) => onChangeHandler1(key, val)}
        placeholder="Select any one"
        style={{ width: 120 }}
        options={data
          .filter((d) => d.disabled === false)
          .map((_) => {
            return {
              label: _.name,
              value: _.id
            };
          })}
        bordered={false}
      />

When the onChange is commented out the behaviour is as expected, the selected value shows the label(name) instead of the value(id).

theinfiltrator
  • 91
  • 6

1 Answers1

3

Try this: Just add the value prop to both selects. Eg:-

<Select value={option1} .../>
<Select value={option2} .../>
Jolly Good
  • 452
  • 7
  • 17