# 0915 React.js

### 用Component render內容進html

- member_dashboard.ejs:70

<table id='memberShoppingCartListOn'></table>

- member_dashboard.ejs:507

class CartList extends React.Component {
        state = {
          cartList: [
            { cartprodId: 1, prodImg:"/images/member_img/product13.jpeg" ,prodName: "【英國】Gnaw松鼠啃無添加手工巧克力100g-軟焦糖/海鹽焦糖/覆盆莓/杏仁太妃糖海鹽/香蕉太妃派/草莓白巧克力/果乾和餅乾牛奶", prodChoose:"草莓白巧克力" , prodPrice: "145" , prodquantity: "1" },
            { cartprodId: 2, prodImg:"/images/member_img/product12.jpeg" ,prodName: "【德國】Kuhbonbon牛奶糖-經典焦糖/蜂蜜牛奶/咖啡/榛果/巧克力/蛋奶酒 (小牛糖)", prodChoose:"草莓白巧克力" ,prodPrice: "65" , prodquantity: "2"},
            { cartprodId: 3, prodImg:"/images/member_img/product11.jpeg" ,prodName: "【西班牙】Salysol罐頭軟糖60g-綜合/草莓", prodChoose:"草莓白巧克力" ,prodPrice: "99" , prodquantity: "3"},
          ]
        }
        render() {
          return (
            <React.Fragment>
              {
                this.state.cartList.map( item => 
                    <tr>
                      <td> <div className='memberShoppingCartProdIngandName' ><img className='memberShopppingCartProdImg' src= {item.prodImg} alt=""/><div>{item.prodName}<br/><span className='memberShopppingCartProdChoose'>{item.prodChoose}</span></div> </div> </td>
                      <td> NTD {item.prodPrice}  </td>
                      <td> <button className='memberShoppingCartProdAddDelBtn'>-</button><input type="text" value={item.prodquantity}/> <button className='memberShoppingCartProdAddDelBtn'>+</button></td>
                      <td> NTD {item.prodPrice * item.prodquantity} </td>
                      <td><button className='memberShoppingCartDelBtn'><img src="/images/delete.svg" /></button></td>
                    </tr>
                )
              }
            </React.Fragment>
          )
        }
      }

      class App extends React.Component {
        state = { }
        render() {
          return (
            <React.Fragment>
                <tr className='memberShoppingCartDetailHeader'>
                  <td className='width420'>商品名稱</td>
                  <td className='width80' >單價</td>
                  <td className='width120'>數量</td>
                  <td className='width80'>小計</td>
                  <td className='width60'>刪除</td>
                </tr>
              <CartList />
            </React.Fragment> 
          );
        }
      } 

      ReactDOM.render(
        <App />,
        document.getElementById("memberShoppingCartListOn")
      )