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

[Aranya]

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>

[jenovs]

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.

[Aranya]

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

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

[jenovs]

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

[Aranya]

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

[jenovs]

Same way you set quantity.

[Aranya]

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