react cart

ついにcomponents/cartに入ります。
ここで取り上げるのは
react-phone-e-commerce-project/src/components/Cart/Cart.js
react-phone-e-commerce-project/src/components/Cart/CartItem.js
react-phone-e-commerce-project/src/components/Cart/CartList.js

Cart.js

import React, { Component } from "react";
import Title from "../Title";
import CartColumns from "./CartColumns";
import CartList from "./CartList";
import CartTotals from "./CartTotals";
import { ProductConsumer } from "../../context";
import EmptyCart from "./EmptyCart";
export default class Store extends Component {
  render() {
    return (
      <section>
        <ProductConsumer>
          {value => {
            const { cart } = value;
            if (cart.length > 0) {
              return (
                <React.Fragment>
                  <Title name="your" title="cart" />
                  <CartColumns />
                  <CartList value={value} />
                  <CartTotals value={value} history={this.props.history} />
                </React.Fragment>
              );
            } else {
              return <EmptyCart />;

カートの中のアイテムがなかったらEmptyCartに移り、何もありませんと表示されます。

            }
          }}
        </ProductConsumer>
      </section>
    );
  }
}

CartItem.js

| import React, { Component } from "react"; |
|:--|
| export default class CartItem extends Component { |
|   render() { |
|     const { id, title, img, price, total, count } = this.props.item; |
|     const { increment, decrement, removeItem } = this.props.value; |
|  |
|     return ( |
|       <div className="row my-1 text-capitalize text-center"> |
|         <div className="col-10 mx-auto col-lg-2"> |
|           <img |
|             src={img} |
|             style={{ width: "5rem", heigth: "5rem" }} |
|             className="img-fluid" |
|             alt="" |
|           /> |
|         </div> |
|         <div className="col-10 mx-auto col-lg-2 "> |
|           <span className="d-lg-none">product :</span> {title} |
|         </div> |
|         <div className="col-10 mx-auto col-lg-2 "> |
|           <strong> |
|             <span className="d-lg-none">price :</span> ${price} |
|           </strong> |
|         </div> |
|         <div className="col-10 mx-auto col-lg-2 my-2 my-lg-0 "> |
|           <div className="d-flex justify-content-center"> |
|             <div> |
|               <span |
|                 className="btn btn-black mx-1" |
|                 onClick={() => { |
|                   return decrement(id); |
|                 }} |
|               > |
|                 - |
|               </span> |
|               <span className="btn btn-black mx-1">{count}</span> |
|               <span |
|                 className="btn btn-black mx-1" |
|                 onClick={() => { |
|                   return increment(id); |
|                 }} |
|               > |
|                 + |
|               </span> |
|             </div> |
|           </div> |
|         </div> |
|         <div className="col-10 mx-auto col-lg-2 "> |
|           <div className=" cart-icon" onClick={() => removeItem(id)}> |
|             <i className="fas fa-trash" /> |
|           </div> |
|         </div> |
|  |
|         <div className="col-10 mx-auto col-lg-2 "> |
|           <strong>item total : ${total} </strong> |
|         </div> |
|       </div> |
|     ); |
|   } |
| } |

CartList.js

| import React, { Component } from "react"; 
| import CartItem from "./CartItem"; |
| export default class CartList extends Component { |
|   render() { |
|     const { value } = this.props; |
|     const { cart } = this.props.value; |
|     return ( |
|       <div className="container-fluid"> |
|         {cart.map(item => ( |
|           <CartItem key={item.id} item={item} value={value} /> |
|         ))} |
|       </div> |
|     ); |
|   } |
| } |