how to change individual state of dynamically generated list of items?

Question

I'm relatively new to Svelte and front end and I'm building a small demo of a products catalog. The app does an api request and fetches some json data and generates a grid with products and populates some of the data into each product. I'm trying to figure out how to change each individual item's quantity. Every time the plus button is clicked the quantity of only the product which the button belongs to should change. For example when the first Item's plus button is clicked, only its own quantity to be reduced, not for all other products. And if only that products quantity goes to zero, the button to become inactive. Here's the code:

    import { onMount } from 'svelte';

    let products = [];
    let total = 0;
    let quantity = 5;

    onMount(async () => {
        const res = await fetch(`https://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline`);
        products = await res.json();
    });

    function increment(price){
        total= total + price;
        console.log(total);
        quantity = quantity - 1;
    } 

    function decrement(price){
        total= total - price;
        console.log(total);
        quantity = quantity + 1;
    } 
</script>

<h1>Photo album</h1>

<div class="photos">
    {#each products as product}
        <figure>
            <img src={product.image_link} alt={product.name}>
            <figcaption>{product.name}</figcaption>
            <small>{product.price}<small/>
                <h1>Quantity: {quantity}</h1>
                <button on:click={increment(parseFloat(product.price))}>+</button>
                <button on:click={decrement(parseFloat(product.price))}>-</button>
        </figure>
    {:else}
        <p>loading...</p>
    {/each}
    
</div>
<div>
    <h1>Total {total}</h1>
</div>

<style>
    .photos {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 8px;
    }

    figure, img {
        width: 100%;
        margin: 0;
    }
</style> ```

Answer 1

try the following

App.svelte
<script>
    import { onMount } from 'svelte';
    import Product from './Product.svelte'
    import { total } from './stores.js'

  let products = [];

  onMount(async () => {
    const res = await fetch(`https://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline`);
    products = await res.json();
        products.forEach(function (element) {
        element.quantity = 5;
        });
    });
        
</script>

<h1>Photo album</h1>
    {#if products && products.length}
        <div class="photos">
        {#each products as product}
                <Product product={product} />
            {/each}
    </div>    
  {:else}
    <p>loading...</p>
  {/if}
   
<div>
    <h1>Total {$total}</h1>
</div>

<style>
    .photos {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 8px;
    }

   
</style> 

Create new product component

------Product.svelte----
<script>
    import { total } from './stores.js';
    export let product;

    function increment(price) {
        $total = $total + price;
        console.log($total);
        product.quantity = product.quantity - 1;
    }

    function decrement(price) {
        $total = $total - price;
        console.log($total);
        product.quantity = product.quantity + 1;
    }
</script>

<figure>
    <figcaption>{product.name}</figcaption>
    <img src={product.image_link} alt={product.name} />
    <small
        >{product.price}<small />
        <h1>Quantity: {product.quantity}</h1>
        <button on:click={increment(parseFloat(product.price))}>+</button>
        <button on:click={decrement(parseFloat(product.price))}>-</button>
    </small>
</figure>

<style>
    figure,
    img {
        width: 100%;
        margin: 0;
    }
</style>

and then add a store

----stores.js----
import {writable} from 'svelte/store'

export const total = writable(0)