I've got a page which (at this point) contains only a button. When this button is clicked, a component is dynamically loaded, so if you click it multiple times then multiple components will appear on the page. Each component is a small form that get's submitted on the form's save button is clicked.
So far so good, now, when a component is saved, then the save button is hid and a garbage button will be visible. When one clicks on this garbage button, then the component should be deleted.
To do this, I need to keep track of the component created, so I randomly create a string which I pass as part of the properties. As part of the properties, I also pass a callback function that receives the component ID and will be executed when the garbage button is clicked.
Once the garbage button is clicked, then it'll call the callback function which will remove the component from the list of components by running a filter.
Let's say I have 2 elements. On each element I'm displaying the random ID it was created with.
If I delete the first element I would expect only the second one to remain. This is somehow happening, the second element I see on screen has the correct ID but for some reason it's data (the data in its text fields) is not the correct but it is the data of the element that was just deleted.
Any idea what's going on?
Here's the main page which contain the button to add elements:
<script> import InventoryItem from "../components/InventoryItem.svelte"; export let formData = {}; export let inventoryID; let inventoryItemComponents = []; // Keeps track of the number of components added to inventoryItemComponents and the same /** * loadNewItemForm loads a new InventoryItem component and adds it to a * list of existing components inventoryItemComponents */ const loadNewItemForm = () => { // create random string that will be used as a component identifier. const componentID = Math.random().toString(36).slice(2); inventoryItemComponents = [ ...inventoryItemComponents, [InventoryItem, { formAction: "?/saveItem", inventoryID: inventoryID, componentID: componentID, deleteCallbackFn: removeFromList }] ]; } const removeFromList = id => { let updatedList = inventoryItemComponents.filter( inventoryComponent => inventoryComponent[1].componentID != id ) inventoryItemComponents = [...updatedList]; }</script><div><div class="inventory-items-list"> {#each inventoryItemComponents as [component, props]}<svelte:component this={component} {...props}></svelte:component> {/each}<!-- New item button --><div class="float-right"><div class="md:p-4 flex item-center justify-center"><button class="btn btn-active btn-primary" on:click={loadNewItemForm}> New Item</button></div></div></div></div>And here's the component that's being loaded:
<script> import {enhance} from '$app/forms'; import ProductLookup from "./ProductLookup.svelte"; export let inventoryID; export let componentID; export let deleteCallbackFn; /** * Local props. */ let inventoryItemID = ""; let total; let productData; let purchasedPrice = 0; let quantity = 1; // Determines whether the save button should be displayed or not. let hideSaveBtn = false; // Holds a list of errors. let errors = {}; /** * Builds the request's payload to the add-inventory-item endpoint. * We won't perform any validation at this point. */ const buildPayload = () => { return {"inventory_id": inventoryID,"product": productData,"purchased_price": purchasedPrice.toString(),"quantity": quantity, } } /** * Saves a new inventory item. * * @param e * @returns {Promise<void>} */ const save = async e => { e.preventDefault(); // reset all errors, so they can be repopulated again from scratch. errors = {}; // perform call to internal API. const response = await fetch('/api/add-inventory-item', { method: 'POST', body: JSON.stringify(buildPayload()), }); const parsedResponse = await response.json() if (parsedResponse.errors) { errors = parsedResponse.errors; return; } inventoryItemID = getInventoryItemIDFromResponse(parsedResponse); // if the record was successfully saved then hide the save button since it shouldn't be allowed to be saved again. hideSaveBtn = true; } /** * Goes through the API response from adding an item into an inventory and * gets the inventory item ID. This has to be done because from the API we're returning * the whole inventory object when adding a new item, so we need to figure the ID out. * * @param apiResponse */ const getInventoryItemIDFromResponse = apiResponse => { const inventoryItems = apiResponse.data.attributes.items; const item = inventoryItems.filter(item => item.product.id === productData.value); return item[0].id; } const deleteItem = () => { deleteCallbackFn(componentID); } /* * Reactive properties. */ // Recalculate total every time either purchasedPrice or quantity change. $: total = purchasedPrice * quantity;</script><div class="card w-full bg-base-100 shadow-xl mt-5"><form method="POST" class="p-6" use:enhance><h2>ID: {componentID}</h2><div class="md:grid md:grid-cols-12 gap-0.5"><!-- Inventory Item ID --><input name="inventory_item_id" type="hidden" value={inventoryItemID} /><!-- ID --><input name="inventory_id" type="hidden" value={inventoryID} /><!-- Product lookup --><div class="col-span-4"><div class="md:w-full md:px-3 mb-6 md:mb-0"><label class="block tracking-wide text-gray-700 text-xs font-bold mb-1" for="product"> Product <span class="text-red-600">*</span></label><ProductLookup bind:value={productData} customClass="input w-full py-4 font-medium bg-gray-100 border-gray-200 text-sm focus:outline-none focus:border-gray-400 focus:bg-white" id="product" name="product" /> {#if errors?.product_id }<small class="text-amber-800">{ errors?.product_id[0]}</small> {/if}</div></div><!-- Quantity --><div class="col-span-2"><div class="md:w-full md:px-3 mb-6 md:mb-0"><label class="block tracking-wide text-gray-700 text-xs font-bold mb-1" for="quantity"> Qty <span class="text-red-600">*</span></label><input bind:value={ quantity } class="input w-full md:max-w-xs py-4 font-medium bg-gray-100 border-gray-200 text-sm focus:outline-none focus:border-gray-400 focus:bg-white" id="quantity" min="1" name="quantity" type="number" /> {#if errors?.quantity }<small class="text-amber-800">{ errors?.quantity[0]}</small> {/if}</div></div><!-- Purchased Price --><div class="col-span-2"><div class="md:w-full md:px-3 mb-6 md:mb-0"><label class="block tracking-wide text-gray-700 text-xs font-bold mb-1" for="purchased_price"> Purchased Price <span class="text-red-600">*</span></label><input bind:value={ purchasedPrice } class="input w-full md:max-w-xs py-4 font-medium bg-gray-100 border-gray-200 text-sm focus:outline-none focus:border-gray-400 focus:bg-white" id="purchased_price" min="0" name="purchased_price" type="number" /> {#if errors?.purchased_price }<small class="text-amber-800">{ errors?.purchased_price[0]}</small> {/if}</div></div><!-- Total --><div class="col-span-2"><div class="md:w-full md:px-3 mb-6 md:mb-0"><label class="block tracking-wide text-gray-700 text-xs font-bold mb-1" for="total"> Total</label><input class="input input-ghost w-full max-w-xs" disabled id="total" type="text" value={total}/></div></div><!-- Buttons --><div class="col-span-2"><!-- Save button --> {#if (!hideSaveBtn)}<div class=""><a href="#" class="flex items-center justify-center link link-hover" on:click={save}><svg class="w-6 h-6 text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 19H1.933A.97.97 0 0 1 1 18V5.828a2 2 0 0 1 .586-1.414l2.828-2.828A2 2 0 0 1 5.828 1h8.239A.97.97 0 0 1 15 2v4M6 1v4a1 1 0 0 1-1 1H1m11 8h4m-2 2v-4m5 2a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z"/></svg></a></div> {:else }<div class=""><svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="green" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 10 2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg><a href="#" class="flex items-center justify-center link link-hover" on:click={deleteItem}><svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20"><path stroke="darkred" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h16M7 8v8m4-8v8M7 1h4a1 1 0 0 1 1 1v3H6V2a1 1 0 0 1 1-1ZM3 5h12v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5Z"/></svg></a></div> {/if}</div></div><div class="flex-row flex"><div class="p-2 float-left"><span class="px-3 mb-6 text-2xs">(<span class="text-red-600">*</span>) Required</span></div></div></form></div>