CODEWITHSUNDEEP
reactjsant-design-pro
theinfiltrator
theinfiltrator

Reputation: 91

While using select in 'antd' library (Ant Design) the selected option is showing value instead of label

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).

Upvotes: 2

Views: 3589

Answers (1)

Jolly Good
Jolly Good

Reputation: 560

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

<Select value={option1} .../>
<Select value={option2} .../>

Upvotes: 3

Related Questions