Svelte way for obtaining props values -in parent component and passing to a child component - after clicking on button - sapper

Question

I'm learning svelte and sapper. I already have everything working correctly in my test app in one component but it is not optimal to build the whole app in one component. So my question here is about the svelte way of doing things. Keep this in mind while reading my question. It's a typical shopping app, page with products, button to add the product to the shopping cart and display the shopping cart and checkout button to finalize the user's purchase with the payment.
My issue is about props and how to pass them from the parent component to the child component. I have a child component that includes a button and 4 variables to gather product information (title, price, description, and id). Here is the code:
<script>
export let title
export let price
export let description
export let id
</script>
<button on:click>Add To Cart Component</button>
The parent component has a product div, a function in the script to get the product elements and pass it to the child component (with the button) so I can process the purchase, here is the parent component:
<script>
function passprops (e) {
let items = e.target.parentElement.parentElement
let title = items.firstChild.innerHTML
let price = items.children[1].innerHTML
let description = items.children[2].innerHTML
let id = items.children[3].innerHTML
}
</script>
my product html code :
<div>
<span id="product">parent component</span>
<span id="price">1000000</span>
<span id="description"> parent component product</span>
<span id="id" hidden="">10</span>
<p class="center"> <Addbutton title={titlep} price={pricep} description={descriptionp} id={idp} on:click={passprops}/>
</p>
</div>
Feel free to correct any code or any setup, I just would like to learn svelte/sapper way of building app.
My question is: When I click on the button component (child component) I need to gather the clicked product details (title, price, description, and id) and pass them to my child component (with the button) so I could process adding the product to my backend-session.cart-db...etc
The reason I'm separating the child/button component is to be able to just include that component in any part of my app for any future products or component with a product. For example, I have a top.svelte with top products so I just include the child component with the button to be able to purchase any of those products or a shoe.svelte with shoe products and add the button/child component to buy shoes.
Is this the right way to set up the app, separate each part to make it easy to edit/modify in the future but I ran into this problem, how do I gather and pass those product details to the props in the child component? Inside passprops I gathered all the correct parameters but how to pass it to the props in the button/child component?
When I run the parent component, it gives me a warning that the button/child component was created without expected props (title, price, description, and id) which understood because I didn't press on the button yet. When I click on the button, all props are undefined.
I would like the help of any svelte/sapper master out there to make me understand this issue. Do I need to use something else like a store (to save the product detail and then pass it to another component that will process the order) or getContest...or just pass the values of the clicked product to the child/button component? But How do I do that?

Answer 1

Hey Marco it looks like you could bind all the details to that onclick interaction.
I cobbled this together to show you what I mean, so this is a form for illustration you'd hide these inputs in reality:
https://svelte.dev/repl/78a268fb88764918b5cebdc7e485721f
So, you have a button component that you can use elsewhere, and the product component where all the details are collated in a form to then use on submission.
The product details are then passed down through the component from the main App file.
I'm not sure if this works in context of the large scope of what you are doing but that is a way to gather the data you are after I think.
I'm also new to Svelte btw! I hope this helps in some small way.