I am studying Front end development and got stuck on this seemingly very simple problem, but I can’t figure out why it does not work.

When I click on “Add to cart” button I want to conditionally display quantity input instead of the button (Also will try to do that by id, but that’s for another topic).

Product Card Image for reference

I wrote this code for ProductCard component:

import productList from "../data/productList";
import { useState } from "react";

function ProductCard() {
  let quantityValue = 0;

  let [newProductList, changeProductList] = useState(productList);

  function revealQuantityInput(id: number) {
    changeProductList({
      ...newProductList,
      quantityVisibility: true,
    });
  }

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    alert("Form submitted correctly!");
  }

  return (
    <>
      {productList.map((item) => (
        <div className="p-6 mb-6 [&>*]:mb-4" key={item.id}>
          <img src={item.image} />
          <div
            className="bg-green-600 p-2"
            onClick={() => revealQuantityInput(item.id)}
          >
            {item.quantityVisibility ? (
              <form onSubmit={handleSubmit}>
                <input
                  type="number"
                  id={"quantity" + item.id}
                  min="1"
                  max="9"
                  step="1"
                  onChange={(e) => (quantityValue = Number(e.target.value))}
                  className="bg-gray-300 w-[150px] opacity-100 mr-3"
                />
                <button className="bg-gray-300" type="submit">
                  Add to Cart
                </button>
              </form>
            ) : (
              <p>Add to Cart</p>
            )}
          </div>
          <p>{item.category}</p>
          <p>{item.name}</p>
          <p>{item.price}</p>
          <p>{JSON.stringify(item.quantityVisibility)}</p>
        </div>
      ))}
    </>
  );
}

export default ProductCard;

This is my data file:

import productTypes from "../types/productTypes"

const productList:productTypes[] = [
    {
        id: 0,
        image: "../../public/images/image-waffle-mobile.jpg",
        name: "Waffle with Berries",
        category: "Waffle",
        price: 6.50,
        quantityVisibility: false,
    },
    {
        id: 1,
        image: "../../public/images/image-creme-brulee-mobile.jpg",
        name: "Vanilla Bean Crème Brûlée",
        category: "Crème Brûlée",
        price: 7.00,
        quantityVisibility: false,
    },
    {
        id: 2,
        image: "../../public/images/image-macaron-mobile.jpg",
        name: "Macaron Mix of Five",
        category: "Macaron",
        price: 8.00,
        quantityVisibility: false,
    },
    {
        id: 3,
        image: "../../public/images/image-tiramisu-mobile.jpg",
        name: "Classic Tiramisu",
        category: "Tiramisu",
        price: 5.50,
        quantityVisibility: false,
    },
    {
        id: 4,
        image: "../../public/images/image-baklava-mobile.jpg",
        name: "Pistachio Baklava",
        category: "Baklava",
        price: 4.00,
        quantityVisibility: false,
    },
    {
        id: 5,
        image: "../../public/images/image-meringue-mobile.jpg",
        name: "Pistachio Baklava",
        category: "Baklava",
        price: 4.00,
        quantityVisibility: false,
    },

]

export default productList

And this is types file:

interface productTypes {
    id: number;
    image: string;
    name: string;
    category: string;
    price: number;
    quantityVisibility: boolean;
}

export default productTypes

When I try to update the state in the function

revealQuantityInput

I get this error:

Object literal may only specify known properties, and 'quantityVisibility' does not exist in type 'SetStateAction<productTypes[]>'.

How come this can be undefined?

I try to update the data list with new TRUE value while also preserving old values like id, name etc…, but it does not work.

Thank you very much in advance!

Regards,
Darius