Created
June 23, 2020 18:26
-
-
Save Eyongkevin/d6414c5073f2a3d2c38af03cc97ff622 to your computer and use it in GitHub Desktop.
sample code for the tut `Build a Shopping Cart with React, Redux, and React-DnD`
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import Phone from './Phone' | |
import ShoppingCart from './ShoppingCart' | |
import MyCart from './MyCart' | |
class Container extends Component { | |
render(){ | |
const { phones } = this.props | |
return( | |
<div class="ui container"> | |
<div className="main-header"> | |
<h2 class="ui icon center aligned header"> | |
<i aria-hidden="true" class="mobile circular icon"></i> | |
<div class="content title">Phone Shope</div> | |
</h2> | |
</div> | |
<div class="ui grid"> | |
<h1 className="mycart-header">My cart</h1> | |
<div class="left floated five wide column my-cart"> | |
<MyCart /> | |
</div> | |
<div class="right floated five wide column"> | |
<div class="ui row"> | |
<h3 class="brand-heading">Phone Brands</h3> | |
</div> | |
<div class="ui row"> | |
<div className="shopping-list"> | |
{Object.keys(phones).map((phone) =>( | |
<Phone key={phone} name={phones[phone].brand} /> | |
))} | |
</div> | |
<div className="shopping-cart"> | |
<ShoppingCart /> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
) | |
} | |
} | |
export default Container |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment