How to use react hook ? Create a simple shopping cart by using react hook

Tutorial

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. In this tutorial we are going to learn how to use hook and will create mini shopping cart project . Watch video on YouTube and get source code below

Project Planning

1. Increasing and decreasing quantity of product
2. Use coupon code to get special discount
3. Price * quantity is equal total price 
4. Discounted total price for coupon user
5. Add to cart

Cart.jsx

import React, { useState } from 'react';
import './Cart.css';



const circle=(quantity)=>{
    return (
        <span className="circle">{quantity}</span>
    )
}

// MAKING A SIMPLE MENU
function Menu({quantity, addToCart}) {
    return (
        <div className="menu">
            <div className="items">
                <ul className="item-1">
                    <li><a href="#">Gift card</a></li>
                    <li><a href="#">Smart Home</a></li>
                    <li><a href="#">Electronics</a></li>
                    <li><a href="#">Fashion</a></li>
                </ul>
                <ul className="item-2">
                    <li><a href="#">Cart
                    <img src="../icon/shopping-cart.svg" width="20px" alt="" />
                    {addToCart == true? circle(quantity): null}
                    </a></li>
                    <li><a href="#"> <strong>En</strong> / বাংলা</a></li>
                </ul>
            </div>
        </div>
    )
}














function Cart() {
    // GENERAL PRICE
    let defaultGeneralPrice = 13;
    const [generalPrice, setGeneralPrice] = useState(defaultGeneralPrice);

    // QUANTITY
    const [quantity, setQuantaty] = useState(1);

    // DISCOUNT
    let dafaultDiscount = 5;
    // let defaultCouponDiscount = quantity * dafaultDiscount ;
    const [couponDiscount, setCouponDiscount] = useState(dafaultDiscount);
    console.log(couponDiscount);

    // TOTAL PRICE
    // let defaultTotalPrice = generalPrice * quantity - couponDiscount ;
    // console.log(defaultTotalPrice);
    const [totalPrice, setTotalPrice] = useState(generalPrice);

    const [addToCart, setAddToCart] = useState(false);
    console.log(`Add to cart button click ? ${addToCart}`);




    function incrementQuentaty(){
        // EVERYTIME WHEN CLICK PLUS BUTTON IT WILL INCREMENT BY ONE
        // AND TOTAL PRICE WILL BE CHANGE
        // PRICE * QUANITY = TOTAL 
        setQuantaty(prevQuantity=> prevQuantity+1);
        setTotalPrice(prevPrice=> prevPrice + generalPrice);
    }
    function decrementQuantity(){
        setQuantaty(prevQuantity=> prevQuantity-1);
        setTotalPrice(prevPrice=> prevPrice - generalPrice);
    }
    function usingCouponDiscount(e){
        e.preventDefault();
        console.log(e.target.value);
        if(e.target.value == 123){
            console.log('set total price and coupon discount');
            setCouponDiscount(prevDiscount => prevDiscount);
            setTotalPrice(prevPrice=> prevPrice - couponDiscount * quantity);
        }
    }




    function  handleClick(e){
        e.preventDefault();
        setAddToCart(prevAddToCart => prevAddToCart=true);
    }






    return (
        <div className="Cart">
            <Menu quantity={quantity} addToCart={addToCart} />
            <br />
            <br />
            <br />
            <div className="box">
                <div className="image">
                    <img src="https://www.univers-du-foot.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/a/i/ai0049_app_virtual_standard_transparent.png" alt="" />
                </div>
                <div className="detail">
                    <div className="title">FC Bayern München</div>
                    <div className="desc">
                        FC Bayern Munich First team squad First team squad Women's team The FC Bayern Women represent the club in the Bundesliga and Women's Champions League.
                    </div>
                </div>
                <div className="set-quan set-bg">
                    <div className="quantaty">Quantaty {quantity}</div>
                    <div className="btns">
                        <button className="btn" onClick={incrementQuentaty}>+</button>
                        <button className="btn" onClick={decrementQuantity}>-</button>
                    </div>
                </div>
                <div className="price">
                    <div className="gp">General price {generalPrice}$</div>
                    <div className="coupon set-bg">Use Coupon 
                        <form >
                            <input onChange={usingCouponDiscount} placeholder="Enter your coupon code" type="text"/>
                        </form>
                    </div>
                    <div className="total-price">Total Price {totalPrice}$</div>
                </div>
                <div className="add set-bg">
                    <button className="btn" onClick={handleClick} >Add to Cart</button>
                </div>
            </div>
        </div>
    )
}

export default Cart;

Cart.css

* {
  padding: 0;
  margin: 0;
}

.Cart {
  text-align: left;
  width: 100%;
  height: 100vh;
  background-image: url(/img/bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.Cart .menu {
  width: 100%;
  height: 80px;
  background: #065968;
}
.Cart .menu .items {
  width: 80%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
}
.Cart .menu .items ul {
  margin: 15px;
}
.Cart .menu .items ul li {
  list-style: none;
  display: inline-block;
  margin: 10px;
}
.Cart .menu .items ul li a {
  color: #a9f2ff;
  text-decoration: none;
}
.Cart .menu .items ul .circle {
  width: 10px;
  height: 5px;
  padding: 5px 10px;
  border-radius: 45%;
  color: #03343d;
  background: #a9f2ff;
}
.Cart .box {
  margin-left: 40%;
  width: 300px;
  color: #a9f2ff;
  background: #03343d;
}
.Cart .box .image {
  text-align: center;
  padding-top: 10px;
}
.Cart .box .image img {
  width: 220px;
}
.Cart .box .detail {
  background: descClr;
  margin: 10px;
}
.Cart .box .detail .title {
  font-size: 1.5rem;
  color: #a9f2ff;
}
.Cart .box .detail .desc {
  font-size: 0.5rem;
  color: #a9f2ff;
}
.Cart .box .set-quan {
  padding: 10px 0;
  background: #065968;
  display: flex;
  flex-basis: 100%;
}
.Cart .box .set-quan .quantaty {
  width: 70%;
  margin-left: 10%;
  font-size: 1rem;
  color: #a9f2ff;
}
.Cart .box .set-quan .btns {
  width: 30%;
}
.Cart .box .set-quan .btns .btn {
  background: #03343d;
  color: #a9f2ff;
  border: none;
  font-size: 2rem;
  color: #a9f2ff;
  margin-right: 5px;
  padding: 0 10px;
}
.Cart .box .price .coupon input {
  background: #065968;
  border: none;
  font-size: 0.8rem;
  color: #a9f2ff;
  padding: 4px 0;
}
.Cart .box .price .coupon input::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #a9f2ff;
  opacity: 0.5;
  /* Firefox */
}
.Cart .box .add .btn {
  margin: 10px;
  background: #03343d;
  color: #a9f2ff;
  border: none;
  font-size: 1rem;
  color: #a9f2ff;
  margin-right: 5px;
  padding: 0 10px;
  padding: 10px;
}
.Cart .box .set-bg {
  background: #065968;
}

/*# sourceMappingURL=Cart.css.map */