Step-by-Step Guide to Using Images with import.meta.url in React

Hello viewers, i am back again for you and now we will start from reactjs. So, we are ready for implemenation Best Practices for Handling Local Images in React Applications and set result. Actually we are making some project like E-commerce where we can implement react rating start.

React

import.meta.url

When building React applications, working with static assets like images is a common requirement. In this article, we’ll walk through how to efficiently import and display images using import.meta.url, which is especially useful in modern JavaScript and frameworks like Vite.

What is import.meta.url?

import.meta.url provides the absolute URL of the current module. It’s a feature introduced in ES modules to handle module-related metadata. In the context of React and tools like Vite, it’s often used for dynamically importing static assets like images.

Why Use import.meta.url for Images?

# It ensures proper resolution of local images at runtime.
# It’s ideal for bundlers like Vite, where traditional require() or relative paths might not work as expected.
# It provides a clean and scalable way to manage static assets in your project.

Step-by-Step Guide

1. Create the Image Component

We’ll create a file named Image.jsx to define our static images and use import.meta.url for dynamic URL resolution.

Image.jsx

// Image.jsx
const IMAGES = {
    image1: new URL('./google-logo.png', import.meta.url).href
};

export default IMAGES;

 

Here’s what’s happening:


# The new URL() constructor dynamically resolves the image path relative to the module using import.meta.url.
# .href provides the URL as a string for use in the src attribute of the <img> tag.



2. Create the Image Display Component

Now, we’ll create another component called GetImage.jsx to display the image.

// GetImage.jsx
import React from 'react';
import IMAGES from './images/Image';

function GetImage() {
  return (
    <div/>
      <div/>
        <img src={IMAGES.image1} alt="Google Logo" />
      </div/>
    </div/>
  );
}

export default GetImage;

 

Here’s what this does:


# The IMAGES object imported from Image.jsx provides the resolved URL of the image.
# The <img> tag uses the resolved URL from IMAGES.image1 to display the image.



3. Add the Image to Your Project


Make sure the google-logo.png image is placed in the correct folder (./images/ in this case) relative to Image.jsx.

# Benefits of This Approach

# Dynamic Resolution: Using import.meta.url ensures that paths are resolved dynamically, reducing potential errors.
# Scalability: Centralizing image URLs in one file (Image.jsx) makes it easy to manage and update images.
# Compatibility: Works seamlessly with modern bundlers like Vite.

Common Mistakes to Avoid

# Incorrect Relative Paths: Ensure the image file is located correctly relative to Image.jsx.

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

Access your reactjs app on another device within the same network

Certainly, Reactjs is a JavaScript library developed by Facenook for building user interfaces. It allows developers to create reusable UI components and effciently manage the state of their applications. Here are some key aspects of Reactjs.

Now we will run a ReactJS Vite app hosted on localhost:5173 on another laptop within the same network, but you need to make a few adjustments like this -

Steps to Access the Vite App on Another Laptop:

 

1) Ensure Both Devices Are on the Same Network:

Both laptops should be connected to the same Wi-Fi or local area network (LAN).


2) Find the Host Laptop's IP Address

On Windows:

 

Open Command Prompt and type: ipconfig
Look for the IPv4 address under your active network connection.
        
On macOS/Linux:
Open the terminal and type: ifconfig or ip addr
Find the IP address of the active network interface.


3) Run the Vite App

Start your Vite development server by running npm run dev (or yarn dev) on the host laptop.



4) Update the URL

Instead of localhost:5173, use the host laptop's IP address with port 5173. For example:

    
http://<HOST_LAPTOP_IP>:5173


Replace <HOST_LAPTOP_IP> with the actual IP address, like 192.168.1.10:5173.



5) Allow Connections Through Firewall (If Necessary)

On Windows:
Search for "Windows Defender Firewall" > "Allow an app or feature through Windows Defender Firewall."
Ensure your development environment (e.g., Node.js) is allowed for both private and public networks.

On macOS/Linux:

Ensure the firewall (if enabled) allows incoming connections on port 5173.

Access the App on Another Laptop
Open a browser on the second laptop and type the IP-based URL (e.g., http://192.168.1.10:5173).



Notes:


If you're using Vite's default configuration, it binds the server to localhost. To make it accessible to other devices, you may need to modify the vite.config.js:


Restart the server after making this change.

  
  

export default {
  server: {
    host: '0.0.0.0', // Allows connections from other devices
    port: 5173,
  },
}; 

Disclaimer

Yarn and npm (Node Package Manager) are package managers for JavaScript. They help developers manage project dependencies (libraries and tools that a project needs to function). Here are some key differences between Yarn and npm:

Yarn

Speed and Performance

# Yarn: Known for its faster performance compared to older versions of npm. Yarn achieves this speed through parallelized operations. It downloads packages in parallel and uses a global cache to reduce the need for repeated downloads.

# npm: While older versions of npm were slower, the newer versions (npm 5 and above) have improved significantly in terms of speed and performance. npm also introduced a caching mechanism, but its operations are not as parallelized as Yarn’s.

2. Lock Files

 # Yarn: Uses a `yarn.lock` file to lock the versions of the packages that are installed. This ensures that the same versions of dependencies are installed every time the project is built, leading to more consistent builds. 

# npm: Uses a `package-lock.json` file, which serves a similar purpose as Yarn’s `yarn.lock`. It was introduced in npm version 5 to improve the reliability of builds by ensuring that the exact same dependencies are installed for every build.

 3. Installation of Dependencies

 # Yarn: Installs dependencies from the top-level down, which can lead to better performance and fewer conflicts.
 

# npm: Traditionally, npm installed dependencies recursively, which could lead to larger `node_modules` directories and more conflicts. Recent versions of npm (npm 7+) use a similar approach to Yarn, flattening the `node_modules` hierarchy.

4. Security
 

# Yarn: Has a built-in feature to check for vulnerabilities in dependencies using the `yarn audit` command.

# npm: Also provides a similar feature with the `npm audit` command. In addition, npm automatically checks for vulnerabilities during installation and provides a summary.
 

5. Community and Ecosystem
 

# Yarn: Gained popularity quickly after its release and has a strong community. It is backed by Facebook, which contributed to its initial popularity.

# npm: Has been around longer and has a larger user base and community. It is maintained by GitHub (Microsoft).

 

Disclaimer

Hello viewers, whats up!! Here i am back again with the new post of question about setTimeout in javascript. Javascript is a high level programming language used for known as web development. With this you can create dynamic and interactive content on websites.

Syntax is similar to that of other programming languages like java and C. It is client side scripting language and when we talk about its Data types , it is support various data types, including numbers, strings booleans objects, arrays and functions.

Here we have a problem about setTimeout in javascript. Question is that there so 6 line of code in javascript. So simply use arrow function and for output we use console.log and after that we have to used setTimeout function and tell that what is the output and which output print first. Look like this -

Code 

(function() {
      console.log("a");
      setTimeout(() => console.log("b"), 1000);
      console.log("c");
      setTimeout(() => console.log("d"), 500);
})();

1) console.log("a"); - Outputs "a" to the console.


2) setTimeout(() => console.log("b"), 1000); - Schedules the execution of the function () => console.log("b") after a delay of 1000 milliseconds (1 second).
   
 
3) console.log("c"); - Outputs "c" to the console.
    

4) setTimeout(() => console.log("d"), 500); - Schedules the execution of the function () => console.log("d") after a delay of 500 milliseconds (0.5 seconds).


Now, let's consider the timing:


#:/    "a" is logged immediately.
#:/    "b" is scheduled to be logged after 1 second.
#:/    "c" is logged immediately.
#:/    "d" is scheduled to be logged after 0.5 seconds.


However, JavaScript is single-threaded, and the event loop is used to manage the execution of asynchronous code. The scheduled functions (like "b" and "d") are placed in the event queue and executed when the call stack is empty.



So, the output order will be:

    "a"
    "c"
    "d"
    "b"

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

React Share  Social Media Button in Reactjs

Hello viewers, i am back again for you and now we will start from reactjs. So, we are ready for implemenation of react-share-social-media-button in reactjs and set result. Actually we are making some project like E-commerce where we can implement react social media icon as a shareable.

React

Topic we will cover -

# Install npm install react-rating-star-with-type

# Implementation of rating start

# Output

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-to-cart-with-id-react-redux-saga.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/add-routing-and-make-cart-page.html

Install Social Media button React

Here, we will install library of reactjs (npm install react-share) in cmd prompt, terminal whatever.

Now, we are ready to code of react social media shareable button using with this library. After installation of  react-share-social-media-button. We are building an E-Commerce website using Redux.

First we import this library.

import { FacebookIcon, FacebookShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton } from 'react-share'

Now we are using social media name button JSX tag.

 <FacebookShareButton
            url={'https://facebook.com/share.php?u=http://localhost:5173/exclusivecollection'}
            quote={'Printed Shirt'}
            hashtag="#mfo">
              <FacebookIcon size={32} round />
            </FacebookShareButton>
             
            <WhatsappShareButton
            url={'http://localhost:5173/exclusivecollection'}
            quote={'Printed Shirt'}
            hashtag="#mfo">
              <WhatsappIcon size={32} round />
            </WhatsappShareButton>
             
              
            <TwitterShareButton
            url={'http://localhost:5173/exclusivecollection'}
            quote={'Printed Shirt'}
            hashtag="#mfo">
              <TwitterIcon size={32} round />
            </TwitterShareButton>

# The FacebookShareButton component is used for the Facebook share button.
 
# It takes props like url, quote, and hashtag, specifying the URL, quote, and hashtag to be shared on Facebook.
 
# The FacebookIcon component is nested inside, indicating the appearance of the button.

# As a localhost it is our localhost url but you can set domain name and your url where site is located.

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

Search product with API

Hello viewers, i am back again for you and now we will start from reactjs. So, we are ready for implemenation of react-rating-start in reactjs and set result. Actually we are making some project like E-commerce where we can implemen react rating start.

React

Topic we will cover -

# Install npm install react-rating-star-with-type

# Implementation of rating start

# Output

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-to-cart-with-id-react-redux-saga.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/add-routing-and-make-cart-page.html

Install React Rating Start 

Here, we will install library of reactjs (npm install react-rating-star-with-type) in cmd prompt, terminal whatever.

Implementation of React Rating Start

Now, we are ready to code of react rating star using with this library. After installation of react rating start. We are building an E-Commerce website using Redux.

First we import this library.

import ReactStars from 'react-rating-star-with-type';

Now we are using useState hooks for change the static state value of rating start when user hover on rating start with onChange event handler change the color.

  const [star, setStar] = useState(5);
   const onChange=(nextValue) => {
    setStar(nextValue)
   }

 <ReactStars classNames=" " onChange={onChange} value={4.2} edit={true} activeColors={[ "yellow", "red"]} 
    />

 1. classNames: This prop allows you to pass additional CSS classes to the component. In your example, it is an empty string (" "). This can be useful for styling the component with custom CSS.

2.onChange: This prop specifies a callback function that will be called whenever the user changes the rating by clicking on the stars. In your example, it refers to a function named onChange. You need to define this function elsewhere in your code to handle the rating changes.

3. value: This prop sets the initial value of the star rating. In your example, it's set to 4.2. This means that initially, the component will display 4.2 stars filled.

4. edit: This prop determines whether the user can interact with the stars to change the rating. When set to true, users can click on the stars to modify the rating; when set to false, the stars are essentially read-only. In your example, it's set to true, indicating that the user can edit the rating.

5. activeColors: This prop sets the color of the active (filled) stars. In your example, it's an array containing one color, "yellow". This means that the filled stars will be displayed in yellow

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

Search product with API

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of Search product with API in react redux saga and set result. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

React

Topic we will cover -

# Make Search box and Add style

# Make Action and Saga

# Call API for search product

# Test API result

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-to-cart-with-id-react-redux-saga.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/add-routing-and-make-cart-page.html

Make Search box and Add style

We will make a search bar first with tailwind style css in Header.jsx where user can search anything about product. We will use tailwind css for adding style.

 Header.jsx

 <div className="max-w-[1040px] shadow-xl mx-auto min-h-[40px] p-3 ">
        <div className="pt-2">
          <input
            type="search"
            placeholder="Search the Product"
            className="w-full pl-3 pr-3 pt-2 pb-2 border border-blue-700 rounded text-slate-600  "
             
          />
        </div>
      </div>

 Make Action and Saga

Now we will make action file (already have been created - please check our previous blog).

ProductAction.jsx

Here we import first PRODUCT_SEARCH as a constant from constant.jsx file and then make const productSearch and inside this arrow function we pass a query this will be useful as a parameter when we search anything from searchbar and return type (same as constant file).

import { PRODUCT_SEARCH } from "./Constant";

export const productSearch = (query) => {
    return {
        type: PRODUCT_SEARCH,
        query,
    }
}

Constant.jsx

Now we will call from header.jsx file

import { useSelector, useDispatch } from "react-redux";
  import {productSearch } from '../redux/ProductAction';
  
  const dispatch = useDispatch();
  
   <div className="max-w-[1040px] shadow-xl mx-auto min-h-[40px] p-3 ">
        <div className="pt-2">
          <input
            type="search"
            placeholder="Search the Product"
            className="w-full pl-3 pr-3 pt-2 pb-2 border border-blue-700 rounded text-slate-600  "
            onChange={(event) => dispatch(productSearch(event.target.value))}
          />
        </div>
      </div>
  

productSaga.jsx

function* searchProduct(data) {
    let result = yield fetch(`http://localhost:3000/products?q=${data.query}`);
    result = yield result.json();
    console.log("product search is called", data);
    yield put({type: SET_PRODUCT_LIST, data:result})

    if (result.length === 0){
        console.log("not found");
    }
}

function* ProductSaga() {
 yield takeEvery(PRODUCT_SEARCH, searchProduct)

}

Whole Code (Header.jsx)

import React from "react";
import { BsFillCartPlusFill } from "react-icons/bs";

import { useSelector, useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";

import {productSearch } from '../redux/ProductAction';

const Header = () => {
  const result = useSelector((state) => state.cartData);
  console.log("redux data in header", result);

  const dispatch = useDispatch();

  const navigate = useNavigate();

  return (
    <div>
      <div className="bg-[#434be6] p-4 w-full relative">
        <div className=" flex justify-between mx-auto px-2   items-center  ">
          <div>
            <h1
              className="text-white font-bold cursor-pointer"
              onClick={() => navigate("/")}
            >
              E-Commerce
            </h1>
          </div>

          <div className="cursor-pointer" onClick={() => navigate("/cart")}>
            <span className="bg-green-500  rounded-xl px-1 absolute text-[12px] top-[9px]  right-7 text-white border border-black">
              {result.length}
            </span> 

            <BsFillCartPlusFill size={30} className="" />
          </div>
        </div>
      </div>

      <div className="max-w-[1040px] shadow-xl mx-auto min-h-[40px] p-3 ">
        <div className="pt-2">
          <input
            type="search"
            placeholder="Search the Product"
            className="w-full pl-3 pr-3 pt-2 pb-2 border border-blue-700 rounded text-slate-600  "
            onChange={(event) => dispatch(productSearch(event.target.value))}
          />
        </div>
      </div>
    </div>
  );
};

export default Header;

Constant.jsx

export const  ADD_TO_CART  = "ADD_TO_CART";
export const  REMOVE_TO_CART  = "REMOVE_TO_CART";
export const  EMPTY_CART  = "EMPTY_CART";
export const PRODUCT_LIST = "PRODUCT_LIST";
export const SET_PRODUCT_LIST = "SET_PRODUCT_LIST";
export const PRODUCT_SEARCH = "PRODUCT_SEARCH";



//www.kumaratuljaiswal.in #www.hackingtruth.in

ProductAction.jsx

import { PRODUCT_LIST,PRODUCT_SEARCH } from "./Constant";

    export const productList =  () =>  {

    return {
        type: PRODUCT_LIST,

    }
}

export const productSearch = (query) => {
    return {
        type: PRODUCT_SEARCH,
        query,
    }
}

ProductSaga.jsx

import { takeEvery, put } from 'redux-saga/effects';
import {ADD_TO_CART, PRODUCT_LIST, PRODUCT_SEARCH, SET_PRODUCT_LIST} from './Constant';

function* getProducts(){
 
     let data = yield fetch(`http://localhost:3000/products`);
     data = yield data.json();
     yield put({ type: SET_PRODUCT_LIST, data})

 
}
 

function* searchProduct(data) {
    let result = yield fetch(`http://localhost:3000/products?q=${data.query}`);
    result = yield result.json();
    console.log("product search is called", data);
    yield put({type: SET_PRODUCT_LIST, data:result})

    if (result.length === 0){
        console.log("not found");
    }
}


function* ProductSaga() {
 yield takeEvery(PRODUCT_LIST, getProducts)
 yield takeEvery(PRODUCT_SEARCH, searchProduct)
 
}

export default ProductSaga

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

Show Added To Cart Product with Price Calculation

Hello viewers, i am back again for you and now we will start from redux-saga. So, we are ready for implemenation of Show Added To Cart Product with Price Calculation in redux saga and set result. Actually we are making some project like E-commerce where we can implement searchbar, product add to cart, remove from cart, empty cart, cart section after adding some product and product section and a lot of things, So, don't worry i'm not going to leave you alone.

React

Topic we will cover -

# Get Data from redux

# Make Table to show cart product

# Add style to Page

# Show price and discount

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-to-cart-with-id-react-redux-saga.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/add-routing-and-make-cart-page.html

Get Data from redux

 Here, we gonna first try to fetch data from cart and after that we will show output as a cart length and price calculation but before that we will make a const cartData = useSelector hook and get a state of data (cartdata) that which we have added inside the cart.

const cartDataa = useSelector((state) => state.cartData);

# NOTE - i know you must be getting confused, so you must see our previous blog. 

JSON File (Product.json - json-server product.json)

{
    "products": [
      {
        "id": 1,
        "name": "IQOO Z7 Pro 5G",
        "color": "blue",
        "price": 23999,
        "category": "mobile",
        "brand": "IQOO",
        "photo": "https://m.media-amazon.com/images/I/61Id6WJDWqL._SX679_.jpg"
      
      },
      {
        "id": 2,
        "name": "iQOO Neo 7 5G",
        "color": "blue",
        "price": 27999,
        "category": "mobile",
        "brand": "IQOO",
        "photo": "https://m.media-amazon.com/images/I/41xfzQ2MeAL._SX300_SY300_QL70_FMwebp_.jpg"
      
      },
      {
        "id": 3,
        "name": "iQOO 9 SE",
        "color": "blue",
        "price": 23999,
        "category": "mobile",
        "brand": "IQOO",
        "photo": "https://m.media-amazon.com/images/I/618gFHEnXUL._SX679_.jpg"
      
      },
      {
        "id": 4,
        "name": "Vivo T2x 5G",
        "color": "blue",
        "price": 18050,
        "category": "mobile",
        "brand": "Vivo",
        "photo": "https://m.media-amazon.com/images/I/71ehbISi-zL._SL1500_.jpg"
      
      },
      {
        "id": 5,
        "name": "TECNO Spark 9",
        "color": "gray",
        "price": 6999,
        "category": "mobile",
        "brand": "TECHNO",
        "photo": "https://m.media-amazon.com/images/I/9185sX9EGFL._SL1500_.jpg"
      
      },
      {
        "id": 6,
        "name": "IKALL Z19 Pro",
        "color": "blue",
        "price": 8799,
        "category": "mobile",
        "brand": "IKALL",
        "photo": "https://m.media-amazon.com/images/I/51m4O+mhvOL._SL1000_.jpg"
      
      }
    
    ]
  }

Now you can also check the length of cart items using cartData.length.

 <span>{cartDataa.length}</span> >

After that we will use map() function for getting data from cart that the product which the user has added to the cart.

{
cartDataa.map((item) =>
            <tr className="" key={item.id}>
           
           <td>{item.name}</td>
           <td>{item.color}</td>
           <td>{item.price}</td>
           <td>{item.category}</td>
           <td>{item.brand}</td>
         </tr>
        
  )}

 Before writing the whole code here, we will console of cart price that user has added to the cart.

     let amount = cartDataa.map(item=>item.price).reduce((prev, next)=>prev+next)
console.log(amount)
 

 
1) cartDataa: It seems that cartDataa is an array containing objects representing items in a shopping cart. Each object is expected to have a property named price.


2) .map() Method: The map method is used to create a new array by extracting the price property from each object in the cartDataa array.
        cartDataa.map(item => item.price) creates an array of prices.


3) .reduce() Method: The reduce method is then used to calculate the sum of all the prices in the newly created array.
        (prev, next) => prev + next is a callback function that takes two parameters (prev and next) and returns their sum. The reduce method applies this function cumulatively to the elements of the array, resulting in the sum of all prices.


4) amount Variable: The result of the reduce operation, which is the total sum of prices, is stored in the variable amount.

5) console.log(amount): The console.log statement is used to log the calculated amount to the console, which can be useful for debugging or understanding the value.

Make Table to show cart product

 <div>
       <div className="text-center mx-auto max-w-[1240px] ">
       <h1 className="text-blue uppercase underline font-bold first-letter:text-[red] pb-4 pt-4 cursor-pointer" onClick={() => navigate('/')}>Product List</h1>
           <span>{cartDataa.length}</span> 
       </div>

      <div className="max-w-[1420px] mx-auto  ">
        <div className="grid lg:grid-cols-2 ml-6 mr-6 gap-10   ">
          <div className="">
            <table className="border-2 shadow-sm  bg-white ">
              <tr className="text-white bg-blue-500 text-left w-full">
                <th className="w-36" >Name</th>
                <th className="w-36">Color</th>
                <th className="w-36">Price</th>
                <th className="w-36">Category</th>
                <th className="w-36">Brand</th>
              </tr>
              
          {
            cartDataa.map((item) =>
            <tr className="" key={item.id}>
           
           <td>{item.name}</td>
           <td>{item.color}</td>
           <td>{item.price}</td>
           <td>{item.category}</td>
           <td>{item.brand}</td>
         </tr>
        
          )}
             
             
            </table>
          </div>

          <div className="text-right  ">
            <h1 className="border-2 text-center font-semibold text-white bg-blue-500  ">Order Summary</h1>
           <div className="flex flex-col justify-center">
         <p className="font-semibold mx-auto mt-2">
          Have Coupan ?
         </p>
         <div className=" mx-auto m-4">
          <input type=""
          className="rounded mb-2 p-2 mr-4 text-slate-600"
          placeholder="Coupan Code"
          />
          <button className=" bg-black text-white p-4 rounded">
                Apply
              </button>
         </div>
         <div className="flex shadow-md  ">
              <div className="mx-auto px-8 py-4">
                <div className="md:flex justify-between mb-5 ">
                  <span className="font-semibold text-sm uppercase">
                    Total Price
                  </span>
                 <span className="font-semibold text-sm pl-28">{amount}</span> 
                  
                 
                </div>
                <div className="md:flex justify-between  mb-5">
                  <span className="font-semibold text-sm uppercase">
                    Discount
                  </span>
                   <span className="font-semibold text-sm">{amount/10}</span> 
                </div>
                <div className="md:flex justify-between  mb-5">
                  <span className="font-semibold text-sm uppercase">Total</span>
                   <span className="font-semibold text-sm">{amount-(amount/10)}</span> 
                </div>
                
                <div className="border-t mt-8">
                  <div className="flex font-semibold justify-between py-6 text-sm uppercase">
                    <span>Total cost</span>
                   <span>{amount-(amount/10)}</span> 
                  </div>
                  <button className="bg-indigo-500 font-semibold hover:bg-indigo-600 py-3 text-sm text-white uppercase w-full">
                    Checkout
                  </button>
                </div>
              </div>
            </div>
           </div>

          </div>
        </div>
      </div>

    </div>

1) HTML Structure: The outermost element is a <div> that wraps the entire content.

2) Header Section: Inside the outer <div>, there's a header section with a title "Product List" that also displays the number of items in the cart (cartDataa.length). The title is a clickable element that triggers a navigation to the root path ('/') when clicked.

3) Product List Section: Following the header, there is a section for displaying a list of products in a grid layout (lg:grid-cols-2 for large screens, 2 columns). The product information is displayed in a table with columns for "Name," "Color," "Price," "Category," and "Brand."
        The product data is dynamically rendered using the map function to iterate through the cartDataa array and display each product's details in a table row (<tr>).

4) Order Summary Section: On the right side of the page, there is an order summary section.
        It includes an input field for entering a coupon code and a button to apply the coupon.
        Below that, there's a section displaying the total price, discount, and the final total. The values seem to be dynamic and are being calculated based on the amount variable.
        Finally, there's a checkout button.

5) Styling: The styling is done using Tailwind CSS classes, which are utility classes for styling in a functional way.
        Classes like text-blue, uppercase, underline, font-bold, mx-auto, etc., are used to style various elements.

6) Dynamic Content: The content is dynamic and depends on the data in the cartDataa array and the amount variable, which is used to calculate the total price, discount, and final total.

7) Event Handling: The title "Product List" has an onClick event that navigates to the root path ('/') when clicked.

8) React Component Structure: The code suggests the usage of React components as it utilizes JSX syntax, and the dynamic content and event handling are typical in React applications.

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE  

Disclaimer