onChange CheckBox antd check id and add to new array Javascript/Reactjs

Question

I have CheckBox.Group, when checked the value return array and id exp: ["view"] 1

i have local array call finalArray now i want to check the function onChange have

same id => replace the new value in array

different id => push new object {["view"] 1} to the array

export default function App() {
  const options = [
    {
      label: "view",
      value: "view"
    },
    {
      label: "add",
      value: "add"
    },
    {
      label: "edit",
      value: "edit"
    },
    {
      label: "delete",
      value: "delete"
    }
  ];

  let finalArray = [];
  const onChange = (arr, id) => {
    console.log(arr, id);
    if (!finalArray.length) {
      // Load first time have no item => add new item to array
      finalArray.push({ arr, id });
    } else {
      finalArray.map((item, index) => {
        // load second time have item => check same id
        if (item.id === id) {
          // if the id in finalArray === id
          // => replace new value
          finalArray[index] = { arr, id };
        } else if (item.id !== id) {
          // if the id in finalArray !== id
          // => add new object to array
          finalArray.push({ arr, id });
        }
      });
    }
    console.log(finalArray);
  };



 // array is for render 4 element checkbox
  const arrCheckbox = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];

  return (
    <div className="App">
      {arrCheckbox.map((item) => {
        return (
          <Checkbox.Group
            options={options}
            style={{ padding: "20px" }}
            key={item.id}
            // value="view"
            onChange={(e) => {
              onChange(e, item.id);
            }}
          ></Checkbox.Group>
        );
      })}
    </div>
  );
}

CodeSanBox example : https://codesandbox.io/s/mystifying-browser-b0fn0k?file=/src/App.js:0-1504

the issue is first line of checkbox i check result is right but the second line when i check it will multiple finalArray , you can see result in codesanbox

Dhaval Gajjar · Accepted Answer · 2022-10-18 04:35:01Z

1

You have used the wrong condition for different id => push new object {["view"] 1} to the array It should be outside the array iterate not inside. Because in array 1 element matches but others do not so it will add again.

import { Checkbox } from "antd";

export default function App() {
  const options = [
    {
      label: "view",
      value: "view"
    },
    {
      label: "add",
      value: "add"
    },
    {
      label: "edit",
      value: "edit"
    },
    {
      label: "delete",
      value: "delete"
    }
  ];

  let finalArray = [];
  const onChange = (arr, id) => {
    console.log(arr, id);
    if (!finalArray.length) {
      // Load first time have no item => add new item to array
      finalArray.push({ arr, id });
    } else {
      let exists = false;
      finalArray.map((item, index) => {
        // load second time have item => check same id
        if (item.id === id) {
          // if the id in finalArray === id
          // => replace new value
          if (arr.length !== 0) {
            finalArray[index] = { arr, id };
          } else {
            finalArray.splice(index, 1);
          }
          exists = true;
        }
      });
      if (!exists) {
        finalArray.push({ arr, id });
      }
    }
    console.log(finalArray);
  };

  // array is for render 4 element checkbox
  const arrCheckbox = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];

  return (
    <div className="App">
      {arrCheckbox.map((item) => {
        return (
          <Checkbox.Group
            options={options}
            style={{ padding: "20px" }}
            key={item.id}
            // value="view"
            onChange={(e) => {
              onChange(e, item.id);
            }}
          ></Checkbox.Group>
        );
      })}
    </div>
  );
}

Running sample https://codesandbox.io/s/elated-jackson-qtu87z

edited Oct 18, 2022 at 4:35

answered Oct 18, 2022 at 3:23

Dhaval Gajjar

3,0301 gold badge5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

phu.duongquoc Over a year ago

it worked, but i have a new problem is when uncheck the checkbox, it not remove the empty array out of finalArray

Dhaval Gajjar Over a year ago

You need to check if the array is empty then remove else replace it. Updated answer.

Collectives™ on Stack Overflow

onChange CheckBox antd check id and add to new array Javascript/Reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related