How to create a shopping cart in React?

Question

React

Since I'm starting to learn React, I would like to understand how the counter works here, and how to write it correctly, so that when you press the "button +" or "Button -" increase or decrease the price, and of course, when you click the Add to Cart > button, it switches to another page where the price state was saved, how to implement it

Answer 1

In general, the question you asked is quite interesting. However, the problem is that the answer to it is quite massive, unless, of course, the answer is complete.
Therefore, unfortunately, it will have to be reduced a little.
Imagine you have a small store with several products. For example, these will be simple phones. The structure of one product is quite simple: a picture, a title, a description, and a buy button.
Under the hood, things are a little different. We will have an array, inside of which there are objects with data. The object will include: product name, product description, product image and a unique identifier. An example of one object will be a little lower.

{
  id: 0,
  name: "Nokia 3310",
  description: "Телефон, переживший падение в жерло вулкана",
  url: "https://static.shiftdelete.net/wp-content/uploads/2018/05/nokia-3310-1-milyon-volt-yuke-dayandi-sdn-01.jpg",
  price: 2800
}

Since React applications are single page, that's why they are called SPA, which is translated into a normal “single page application”. We will have several pages: the first page with products, where you can purchase some product, and the second page is a simple shopping cart.
I don't think there should be any problems with routing. However, if they arise, you can watch this video. In English , in Russian .
Now let's decide.
When you click on the "Buy" button, an action should occur. The product that we bought should go to the cart, and when switching to the cart page, it should be shown on the page. The question arises, how to do it?
The answer is quite simple: create an empty array, into which we will scan all the purchased products. And it is this array that will be displayed on the cart page. The object of the purchased product would be like this, for example.

{
  id: 0,
  name: "Nokia 3310",
  description: "Телефон, переживший падение в жерло вулкана",
  url: "https://static.shiftdelete.net/wp-content/uploads/2018/05/nokia-3310-1-milyon-volt-yuke-dayandi-sdn-01.jpg",
  price: 2800,
  count: 1
}

On the page we will have several buttons. The first one is responsible for surprising a product from the cart, the second one for adding another product, and the last one for removing one product. With each click, we will access the array of objects and look for the desired element. If it is, then when buying, change its count by adding one. How would this happen?
I'll tell you about the algorithm for adding an element to an array:

1. When clicked, we will get its ID.
   
2. Then we go through the array through the find loop and get the object itself.
   
3. At the end, we write the resulting object to an array. (PS Remember one important rule, since you cannot change state in React or Redux, you should use push very carefully. In this case, you should not use push, the spread operator will come in handy).
   

Although I wrote in the answer, it will not be superfluous to duplicate here. In the morning I could not add an example. However, based on your original question about the store, I wrote a simple example.
I will say right away that the repetition of the code in the example is deliberate . If you do something like this yourself, avoid repeating the code as it may affect application support. And in general, repeating code is not good, unless of course it is consciously repeated.
The example itself: CodeSandbox (Cart)

Answer 2

All answers are here: https://ru.reactjs.org/tutorial/tutorial.html