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 <div key={index} style={{ marginRight: "0", paddingRight: "0" }}> ? — shubham jha
– shubham jha, Commented Oct 24, 2020 at 4:11
Yeah, I tried using key prop as you have suggested. It doesn't solve the issue. — Archit Sandesara
– Archit Sandesara, Commented Oct 24, 2020 at 4:15
Does this answer your question? What is the cleanest way to remove an element from an immutable array in JS? — diedu
– diedu, Commented Oct 24, 2020 at 4:15

diedu · Accepted Answer · 2020-10-24 04:58:38Z

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, 2020 at 4:58

diedu

20.9k4 gold badges40 silver badges53 bronze badges

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

1 Comment

Archit Sandesara Over a year ago

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.

Wael Zoaiter · Accepted Answer · 2020-10-24 05:08:29Z

1

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);
  }}
/>

answered Oct 24, 2020 at 5:08

Wael Zoaiter

7261 gold badge7 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related