Solid component not sending updated data. | Astro Lounge | Page 1

bright wren Jun 26, 2023, 9:12 PM

Hello my people, I´ve been struggling with a solid js component that is inside in one of my astro pages. <ComplementProduct client:load product={data} data={data.complements} />.
Well the issue here is that I have a component that renders multiple choosable products that you can add to the shopping cart at the same time (depending which products you selected). Then I import an add to cart form, to add those products to the local storage. I need to filter those products so the form only gets the selected products, but the form is getting the initial array value. I´m not sure what I´m doing wrong because everything is rendering correctly, the only problem is the passed values.

📎 message.txt

This is my main solid code

`export default function AddToCartForm({ children, item, itemArray }: Props) {
// we'll hardcode the item info for simplicity!S
const [tasks, setTasks] = createSignal<CartInfo[]>([]);
createEffect(() => {
const storedTasks = localStorage.getItem("solid");
if (storedTasks) {
setTasks(JSON.parse(storedTasks));
}
});
createEffect(() => {
localStorage.setItem("solid", JSON.stringify(tasks()));
});
const addTask = (task: CartInfo) => {
setTasks((prevState) => [...prevState, task]);
};
const updateTask = (task: { id: string; quantity: number }) => {
setTasks((prevState) =>
prevState.map((t) =>
t.id === task.id ? { ...t, quantity: task.quantity } : t,
),
);
};
const handleFormArray = (e: SubmitEvent) => {
for (const item of itemArray) {
const product = {
id: item.id,
name: item.name,
slug: item.slug,
image: item.image,
price: item.price,
quantity: 1,
};
const existingEntry = tasks().find((t) => t.id === item?.id);
if (existingEntry) {
const obj = {
...existingEntry,
quantity: existingEntry.quantity + 1,
};
updateTask(obj);
increaseCounter();
updatePrice();

    // window.location.href = "/carrito";
  } else {
    addTask(product);
    addCartItem(product);
    // window.location.href = "/carrito";
    increaseCounter();
    updatePrice();
  }
}

};
function addToCart(e: SubmitEvent) {
e.preventDefault();
if (item) handleFormSubmit(e);
if (itemArray) handleFormArray(e);
// addCartItem(hardcodedItemInfo);
}
return <form onSubmit={addToCart}>{children}</form>;
}
`

#Solid component not sending updated data.