Definición del problema

Tengo la aplicación React con una tienda pequeña donde todos los productos provienen solo del archivo JSON como API externa, ya que manejo todo en fronten.

Pero acabo de recibir un producto que tiene una cantidad limitada -> Solo tengo 20psc de ese producto y no estoy seguro de cómo puedo limitar a los usuarios a comprar más de lo que realmente tengo.

Preguntas

1. ¿Hay alguna manera (la más simple posible) de cómo puedo limitar la cantidad de ese producto sin usar la base de datos o el backend?
2. ¿Hay alguna forma de mostrar a los usuarios cuánto queda de ese producto específico? (Imagínelo como una edición limitada -> después de cada número de compra del producto restante se actualizará en vivo)

¿Es eso posible de alguna manera usando solo API o tengo que revertir todo a DB ( firebase, por ejemplo)?

¡Cualquier sugerencia y enlace de ejemplo lo agradezco!

Así es como lo manejo actualmente con una cantidad ilimitada de productos

 // fetch data here const fetchData = () => { fetch('myAPIendpoint') .then((response) => response.json()) .then((data) => { setProducts(data); }) .catch((error) => { console.log(error); }); }; React.useEffect(() => { fetchData(); }, []);

// agregando producto al carrito

 const onAdd = (product) => { const exist = cartItems.find((x) => x.id === product.id); if (exist) { setCartItems( cartItems.map((x) => x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x ) ); } else { setCartItems([...cartItems, { ...product, qty: 1 }]); } };

// mapeo de elementos para mostrarlo en el carrito

 {cartItems.map((item) => ( ..... .....