155. 장바구니 항목 출력하기

bind 함수를 기억하는 가? 

 

=> 놉 

한 번도 안 배운 것 같은데 설명했다고 하시네 ㅋㅋ (기억력이...)

 

Cart.js

import React, { useContext } from 'react';
import styles from './Cart.module.css';
import Modal from '../UI/Modal';
import CartContext from '../../store/cart-context';
import CartItem from './CartItem';

const Cart = props => {
  const cartCtx = useContext(CartContext);

  const totalAmount = `$${cartCtx.totalAmount.toFixed(2)}`;
  const hasItems = cartCtx.items.length > 0;
  const cartItemRemoveHandler = () => {

  }
  const cartItemAddHandler = () => { }


  const cartItems = <ul className={styles['cart-items']}>
    {cartCtx.items.map((item) =>
      <CartItem key={item.id} name={item.name} amount={item.amount} price={item.price}
        onRemove={cartItemRemoveHandler.bind(null, item.id)}
        onAdd={cartItemAddHandler.bind(null, item)} />
    )}
  </ul>;

  return <Modal onClose={props.onClose}>
    {cartItems}
    <div className={styles.total}>
      <span>Total Amount</span>
      <span>{totalAmount}</span>
    </div>
    <div className={styles.actions}>
      <button className={styles['button--alt']} onClick={props.onClose}>Close</button>
      {hasItems &&
        <button className={styles.button}>Order</button>
      }
    </div>
  </Modal>
}

export default Cart;

 

MealItemForm.js

import { useRef, useState } from 'react';

import Input from '../UI/Input';
import styles from './MealItemForm.module.css';

const MealItemForm = props => {
  const [amountIsValid, setAmountIsValid] = useState(true);
  const amountInputRef = useRef();

  const submitHandler = event => {
    event.preventDefault();

    const enteredAmount = amountInputRef.current.value;
    const enteredAmountNumber = +enteredAmount;

    if (enteredAmount.trim().length === 0 || enteredAmountNumber < 1 || enteredAmountNumber > 5) {
      setAmountIsValid(false);
      return;
    }

    props.onAddToCart(enteredAmountNumber);
  }

  return (<form className={styles.form} onSubmit={submitHandler}>
    <Input
      ref={amountInputRef}
      label="Amount"
      input={{
        id: 'amount',
        type: 'number',
        min: '1',
        max: '5',
        step: '1',
        defaultValue: '1'
      }} />
    <button className={styles.button}>ADD</button>
    {!amountIsValid && <p>Please enter a valid number. </p>}
  </form>
  );
}

export default MealItemForm;

 

 

CartItem.js 와 CartItem.module.css 파일은 선생님이 주신 파일을 그대로 추가