How to remove the object and update the array using onClick method

Question

I am creating the list from the skidList array and handling copy and delete operation on each skid as well as on click of delete button I am calling deleteSkid method which removes skid at that index and updates the list.

However, Instead of deleting skid at a particular index, it deletes the last skid in the array list.

const CreateNewTab = () => {
  const [skidList, setSkidList] = useState([]);
  const [productNameMap, setproductNameMap] = useState({});

  useEffect(() => {
    let skidList = [];
    let newSkid = {};
    newSkid["2"] = "0";
    newSkid["3"] = "0";
    newSkid["4"] = "0";
    skidList.push(newSkid);
    setSkidList([...skidList]);
    let productNameMap = {};
    productNameMap["2"] = "PEN";
    productNameMap["3"] = "PENCIL";
    productNameMap["4"] = "ERASER";
    setproductNameMap({ ...productNameMap });
  }, []);

  const updateProductQuantity = (skid, key, newQuantity, index) => {
    console.log("Inside update Skid Quantity Index= " + index);
    skid[key] = newQuantity;
    let newSkidList = skidList;
    newSkidList.splice(index, 1, skid);
    console.log(newSkidList);
    setSkidList([...newSkidList]);
  };

  const deleteSkid = (index) => {
    console.log(index);
    let newSkidList = skidList;
    newSkidList.splice(index, 1);
    console.log("Skid deleted from: " + newSkidList);
    setSkidList([...newSkidList]);
  };
  const insertSkid = (skid) => {
    setSkidList(skidList.concat([{ ...skid }]));
  };
  return (
    <div>
      {skidList.flatMap((skid, index) => (
        <div style={{ marginRight: "0", paddingRight: "0" }}>
          <Row style={{ margin: "0", padding: "0" }}>
            <Col span={19}>
              {Object.keys(skid).map((key) => (
                <Row>
                  <Col span={16}>
                    <h6>{productNameMap[key.toString()]}</h6>
                  </Col>
                  <Col span={8}>
                    <InputNumber
                      min={0}
                      defaultValue={skid[key]}
                      rules={[
                        {
                          required: true,
                          message: "Please input quantity!",
                        },
                      ]}
                      onChange={(newQuantity) => {
                        updateProductQuantity(skid, key, newQuantity, index);
                      }}
                    />
                  </Col>
                </Row>
              ))}
            </Col>
            <Col span={5}>
              <Row>
                <Col span={12}>
                  <Button
                    type="primary"
                    icon={<CopyOutlined />}
                    size="large"
                    shape="circle"
                    onClick={() => insertSkid(skid)}
                  />
                </Col>
                <Col spna={12}>
                  <Button
                    type="primary"
                    size="large"
                    shape="circle"
                    danger
                    icon={<DeleteOutlined />}
                    onClick={() => deleteSkid(index)}
                  />
                </Col>
              </Row>
              }
            </Col>
          </Row>
          <Divider />
        </div>
      ))}
    </div>
  );
};

have you tried using `key` prop on parent element inside `flatMap` like this `
` ? — shubham jha, Oct 24 '20 at 04:11
Yeah, I tried using key prop as you have suggested. It doesn't solve the issue. — Archit Sandesara, Oct 24 '20 at 04:15
Does this answer your question? [What is the cleanest way to remove an element from an immutable array in JS?](https://stackoverflow.com/questions/47023975/what-is-the-cleanest-way-to-remove-an-element-from-an-immutable-array-in-js) — diedu, Oct 24 '20 at 04:15
According to my guess, the changes should be in the deleteSkid method on how I am deleting skid from the index and setting a new array. — Archit Sandesara, Oct 24 '20 at 04:17
@diedu According the link setSkidList([...skidList.slice(0, index), ...skidList.slice(index + 1)]); doesn't solve the issue. — Archit Sandesara, Oct 24 '20 at 04:24

score 1 · Accepted Answer · answered Oct 24 '20 at 04:58

1

It seems it has something to do in how react recycles the dom or something, the item does get deleted from the array but somehow the value is kept in the dom because you're using defaultValue instead value in your inputs, make this little change and it will work

value={skid[key]}

https://codesandbox.io/s/compassionate-ride-1yoti?file=/src/App.js

answered Oct 24 '20 at 04:58

diedu

19,277
4
32
49

1

Thank you @diedu. You made my day! I would love to grab you a coffee if you're in Toronto or visiting in the future. – Archit Sandesara Oct 24 '20 at 05:08

score 1 · Answer 2 · answered Oct 24 '20 at 05:08

Your implementation of deleteSkid() is fine, But you pass the value to the InputNumber as defaultValue so it won't change when the component re-render. Just replace it with value and it should work.

<InputNumber
  min={0}
  value={skid[key]}
  rules={[
    {
      required: true,
      message: "Please input quantity!"
    }
  ]}
  onChange={(newQuantity) => {
    updateProductQuantity(skid, key, newQuantity, index);
  }}
/>

How to remove the object and update the array using onClick method

2 Answers2