Error: Typing on the input field of pick just duplicates whatever value was entered in the qty field

So I have this field where you can enter the quantity. It was working, however, when I added another input field for the pick, it will just duplicate whatever was entered in either of the fields. How do I fix this? Any help would be appreciated. Thank you.

codesandbox: Add to Cart Sampled 2 with Material-UI Table Pagination - CodeSandbox

adding into the cart items:

  const handleAdd = (id, name, price, size, cat, color, quan = null, pick) => {
    console.log("add", id, name, price, size, cat, color, quan, pick);
    const productExist = cartItems.find(
      (item) => item.id === id && item.color === color
    );

    if (productExist) {
      setCartItems(
        cartItems.map((item) =>
          item.id === id && item.color === color
            ? {
                ...productExist,
                quantity:
                  quan === "" || quan ? quan : +productExist.quantity + 1
              }
            : item
        )
      );
    } else {
      setCartItems([
        ...cartItems,
        { id, name, price, size, cat, color, quantity: 1, pick }
      ]);
    }
  };

Table for the cart items:

  <TableContainer component={Paper}>
            <Table
              aria-label="simple table"
              size="small"
              aria-label="a dense table"
            >
             //table Head
              <TableBody>
                
                        <input
                          style={{ width: "1rem" }}
                          value={item.quantity}
                          onChange={(e) => {
                            if (e.target.value === "0") {
                              return handleRemove(item.quantity + item.color);
                            }
                            const re = /^[0-9\b]+$/;
                            if (
                              e.target.value === "" ||
                              re.test(e.target.value)
                            ) {
                              handleAdd(
                                item.id,
                                item.prodName,
                                item.price,
                                item.size,
                                item.cat,
                                item.color,
                                e.target.value
                              );
                            }
                          }}
                        />
                      </TableCell>
                      <TableCell>
                        <label>Pick</label>
                        <input
                          style={{ width: "5rem" }}
                          value={item.pick}
                          onChange={(e) => {
                            console.log(e.target.value, "esdf");
                            return handleAdd(
                              item.id,
                              item.prodName,
                              item.price,
                              item.size,
                              item.cat,
                              item.color,
                              e.target.value
                            );
                          }}
                        />
                      </TableCell>

                      <TableCell align="right">
   
              </TableBody>
            </Table>
          </TableContainer>

Handler:

const handleAdd = (id, name, price, size, cat, color, quan = null, pick)

Handler call:

handleAdd(
  item.id,
  item.prodName,
  item.price,
  item.size,
  item.cat,
  item.color,
  e.target.value
);

Notice how there is missing an argument in the handler call? You’re providing pick as quan.

It’s a better practice to use object as an argument if you have too many (3+) arguments.

Hello, I’ll try to refractor this after everything. I have a problem though, I can now type on the pick field, but it is saved as undefined here

image

image

Your initial data doesn’t have pick value and in handleAdd you’re never setting it.

I’m really sorry, I’m still unsure on how I can set it. I tried setting up this way but it will only show as null

const handleAdd = (
    id,
    name,
    price,
    size,
    cat,
    color,
    quan = null,
    pick = null
  ) => {
    console.log("add", id, name, price, size, cat, color, quan, pick);
    const productExist = cartItems.find(
      (item) => item.id === id && item.color === color
    );

Same way you set quantity.

would this be alright if I set it up like this?

if (productExist) {
      setCartItems(
        cartItems.map((item) =>
          item.id === id && item.color === color
            ? {
                ...productExist,
                pick,
                quantity:
                  quan === "" || quan ? quan : +productExist.quantity + 1
              }
            : item
        )
      );
    }