Displaying products in the shopping cart using a map in react

August 25, 2022

Hello I could not solve this piece of code, my solution is last. Please guide me.
The overview of the final project is as follows:

the details:
In this exercise, we want to show the products that the user has in his shopping cart. In the initial project, there is a file in the path src/data/index.js that contains the list of these products. Also, in the src/App.js file as an example, one of the items in this list is placed statically; You use map to display array of products instead of this fixed product.

Note: To simplify the work, the PersianDigits tool has also been added to the project. By using this function, the entered number will be displayed in the amount format.

import { PersianDigits } from "./utils";

console.log(PersianDigits(100000)) //‎ریال ۱۰۰٬۰۰۰

Requested changes Display the list based on the given array Notes You are only allowed to modify the App.js file.

products in index.js :

export const products = [
  {
    id: 1,
    name: "رب گوجه فرنگی",
    price: 40_000,
    image: "https://quera.ir/qbox/view/0Cur3oz893/1.jpg",
  },
  {
    id: 2,
    name: "شیر سویا",
    price: 80_000,
    image: "https://quera.ir/qbox/view/JKxED84wZp/2.jpg",
  },
  {
    id: 3,
    name: "نارگیل",
    price: 70_000,
    image: "https://quera.ir/qbox/view/d0CdIY6XGt/3.jpg",
  },
  {
    id: 4,
    name: "هویج",
    price: 10_000,
    image: "https://quera.ir/qbox/view/lHrc5ketfC/4.jpg",
  },
  {
    id: 5,
    name: "کاپ کیک",
    price: 20_000,
    image: "https://quera.ir/qbox/view/McoK2FpgNo/5.jpg",
  },
];

code in app.js

import "./App.css";
import { products } from "./data";
import { PersianDigits } from "./utils";

function App() {
  return (
    <div className="d-flex justify-content-center align-items-center vh-100">
      <div className="container">
        <div className="row">
          <div className="col">
            <h3 className="text-center mb-5">سبد خرید</h3>
          </div>
        </div>
        <div className="row">
          <div className="col">
            <div className="list-group">
              {/* Repeat this item*/}
              <div className="list-group-item">
                <div className="d-flex align-items-center justify-content-between">
                  <img
                    src="https://quera.ir/qbox/view/0Cur3oz893/1.jpg"
                    alt="رب گوجه فرنگی"
                    className="product-image"
                  />
                  <span>رب گوجه فرنگی</span>
                  {/* With this function, you can display the number in Rial format*/}
                  <span>{PersianDigits(40_000)}</span>
                </div>
              </div>
              {/* Repeat this item*/}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

>Solution :

You can use a map there

{products.map(data=>(
<div className="list-group-item">
                <div className="d-flex align-items-center justify-content-between">
                  <img
                    src={data.image}
                    alt="رب گوجه فرنگی"
                    className="product-image"
                  />
                  <span>رب گوجه فرنگی</span>
                  {/* With this function, you can display the number in Rial format*/}
                  <span>{PersianDigits(data.price)}</span>
                </div>
              </div>


))}

like that.