So hi I've created some more stunning options. For example, I've used it some bootstrap size and offsets for create some space around the card for and I've created a render title method because the title is common to everyone Of course we can ever better code structure with the container and then inside all the other components but for our purpose This is okay. So everywhere I need the title we just called renders title. And I'm not storing anymore all the the article id but we store will articles. So even here when you perform a purchase article I pass The wall article. So, what we can do is to move this code used to move the code for the article in our dedicated in a dedicated components.

So again, it was a best practice. Let's do it. So components we can we can okay we can put it here in the route. So article cart.js the to be okay let's import react component from react class our tickle cart oops extends component then we have a render method. We have a render method that basically returns the cart and article is retrieved from the props. Okay.

So okay class. So, here okay then we can even pass a prop to see height pay button that is fourfold equal to true. So if not tight pay button We create the button if you know leave hydrate button is false. so here we can use our article card with the article said to article and hide pay button icon set to false. Okay so now we can have our payment I mean card form it is a little bit different so we can do like this we can create a call okay excess seats okay where it basically fools or it could be size 10 offset one that basically Usually we contain our article card articles to our selected article and then we will have okay then for example for us, it can be equal to my sum we can leave the same. What we can do is maybe even from MD we can just do sides three also zero and we can restructure here so this is okay.

So, remove it. And here it can be, for example, a offset one. So eight plus one plus three is 12. Of course, the purchase article is not anymore in our component. So, we have to pass only when needed the for chase article prop. For example, here is the stop put chase article number now to bind the portrays article method with this this dot portrays our steagle dot bind this now, we have another method that is odd type filter.

So, basically if you are buying if you are in the checkout component in the checkout In the checkout view, we don't need this. So, what we can do is to check for a prop and if the if the prop exists we can do it like this other rice can do like this. Otherwise we just create the text part without the onclick event. And at the same time please remember to refactor here. So here, of course you have to bind this Okay, here we Don't need it. But article card here.

We need it. Here. It is.