In a React project using antd library, I've created a list of options from a json data which is populated as a drop-down list. Following is the code for reference

The json data

const newData = [
  {
    id: 123,
    name: "Vijay"
  },
  {
    id: 345,
    name: "Sanket"
  },
  {
    id: 546,
    name: "Hitesh"
  },
  {
    id: 789,
    name: "Sameer"
  },
  {
    id: 421,
    name: "Akshay"
  }
];

That data is used over here in <Select/>

<h2>Data 1</h2>
    <Select
      onChange={(key, val) => handleOnValuesChange(key, val)}
      placeholder="Select any one"
      style={{ width: 120 }}
      options={newData.map((_) => ({
        label: _.name,
        value: _.id
      }))}
      bordered={false}
    />
    <br />
    <h2>Data 2</h2>
    <Select
      onChange={(key, val) => handleOnValuesChange(key, val)}
      placeholder="Select any one"
      style={{ width: 120 }}
      options={newData.map((_) => ({
        label: _.name,
        value: _.id
      }))}
      bordered={false}
    />

The onChange function

const handleOnValuesChange = (key, val) => {
  const allData = newData.map((data) => {
    if (data.id === val) {
      return {
        ...data,
        disabled: true
      };
    } else {
      return {
        ...data,
        disabled: false
      };
    }
  });
  console.log("NEW DATA", allData);
};

When Vijay and Akshay is selected, I'am expecting the data as

0: {id: 1, value: "Vijay", disabled: true } 
1: {id: 2, value: "Sanket", disabled: false}
2: {id: 3, value: "Hitesh", disabled: false }
3: {id: 4, value: "Sameer", disabled: false }
4: {id: 5, value: "Akshay", disabled: true }

but getting output as

0: {id: 1, value: "Vijay", disabled: false } {/* This disabled should change to true */}
1: {id: 2, value: "Sanket", disabled: false}
2: {id: 3, value: "Hitesh", disabled: false }
3: {id: 4, value: "Sameer", disabled: false }
4: {id: 5, value: "Akshay", disabled: true }

How to tackle this? Any appropriate solution highly appreciated

This is the codesandbox link as: https://codesandbox.io/s/bordered-less-antd-4-17-0-alpha-7-forked-wtur0

CodePudding user response：

you are always using the base newData element. so on each call of handleOnValuesChange you have no value set to disabled.

you need to update the newData or use some other temp variable.

also value is the first parameter for the onChange used by antd select.

let newData = [
  {
    id: 123,
    name: "Vijay",
    disabled: false,
  },
  {
    id: 345,
    name: "Sanket",
    disabled: false,
  },
  {
    id: 546,
    name: "Hitesh",
    disabled: false,
  },
  {
    id: 789,
    name: "Sameer",
    disabled: false,
  },
  {
    id: 421,
    name: "Akshay",
    disabled: false,
  }
];

const handleOnValuesChange = (val) => {
  console.log("VAL", val);
  newData = newData.map((data) => {
    console.log(data, val);
    if (data.id === val) {
      return {
        ...data,
        disabled: true
      };
    }
    return data;
  });
  console.log("NEW DATA", newData);
};

CodePudding user response：

I checked the sandbox code and found multiple issues with your code.

1. You have to change the newData value with update value otherwise it will old data for render.
2. You have to compare if (data.id === val.value) instead of if (data.id === val) in handleOnValuesChange function.
3. You have to return data only in else part.

You can check modified implementation on Sandbox

It will be great if you use the state for newData