I’m trying to make a simple order system, when user selects QTY and click “Add to Order”, the information of the selected dish will be shown in the “Your Order” area (click “Refresh Order” to see). What I’m doing is to insert the dish information (from MenuEdit component) into a list (in CustomerOrder component).
My question is as following: I add “Moo Goo Guy Pan” QTY:1 to order, it will be inserted to the list, and then I add “Teriyaki Chicken” QTY:2, it will be inserted to the list, and I add “Moo Goo Guy Pan” again but QTY:3 to order, it will be inserted to the list. The uid is a timestamp when user click “Add to Order”. The list is working fine (I use lodash to deep copy), but when render all the item of the list is not good. I cannot think of a proper way to solve it. I’m willing to provide more information as you request. Thank you for your time and help.
I made a GIF to demonstrate the step and you can see the list changing in the console. link: https://github.com/Dungyichao/COVID19_Reporting_Web/blob/master/img/EggrollChenOrderSC.gif
User click the “Add to Order”, the first and the second step are doing good.
The render steps of the Cart (Your Order), the first and the second step are doing good.
The following is the list that is passed to the component for rendering. Note the qty is different, and this is the correct list which I want and already passed into CartList components.
My Codes and Components structure is as follow
Order.js
export default class CustomerOrder extends Component {
constructor(props) {
super(props);
this.firebase = props.firebase;
this.sendinfo_toCart_handle = this.sendinfo_toCart_handle.bind(this);
this.Cart_new_item_arrive = this.Cart_new_item_arrive.bind(this);
this.remove_item = this.remove_item.bind(this);
this.state = {
Cart_data: [],
Cart_new_item: '',
}
this.refresh_cart_handle = this.refresh_cart_handle.bind(this);
}
remove_item(e){
console.log("Remove item uid: ", e);
}
refresh_cart_handle(){
let {Cart_data} = this.state;
console.log("Current Cart Data: ", Cart_data);
}
Cart_new_item_arrive(e){
//console.log("Cart_new_item_arrive: ", e);
this.setState({Cart_new_item: e}, () => {
//after setstate
this.sendinfo_toCart_handle();
});
}
sendinfo_toCart_handle(){
let {Cart_new_item, Cart_data} = this.state;
let deepcopy_list = _.cloneDeep(Cart_data);
deepcopy_list.push(Cart_new_item);
this.setState({Cart_data: deepcopy_list});
}
render() {
let {Cart_data} = this.state;
return (
<div style={order_style}>
<div style={{
}}>
<h3>Menu</h3>
<MenuEdit firebase={this.firebase} CartAdd={this.Cart_new_item_arrive} />
</div>
<div style={{
}}>
<h3>Your Order</h3>
<Cart data_array={Cart_data} remove_item={this.remove_item} /> {/*remove_item={this.remove_item}*/}
<Button onClick={this.refresh_cart_handle}>Refresh Order</Button>
</div>
</div>
);
}
}
Cart.js
export default class Cart extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div>
<Scroll>
<CartList data_array={this.props.data_array} remove_item={this.props.remove_item} /> {/*remove_item={this.props.remove_item}*/}
</Scroll>
</div>
<div>
<div><Button>Refresh</Button></div>
<div>
<Button>Cancel</Button> {' '}
<Button>Place Order</Button>
</div>
</div>
</div>
);
}
}
CartList.js
export default class CartList extends Component {
constructor(props) {
super(props);
}
render(){
let display_data = this.props.data_array;
let null_page = [];
console.log("Data in CartList.js: ", display_data)
if(display_data[0]){
return(
display_data.map(
(cart_item, idx) => {
//console.log("In Map", idx, ' Item: ', cart_item);
return(
<div>
<CartItem key={idx} u_key={idx + 1}
Cart_item_info={cart_item}
remove_item={this.props.remove_item} /> {/*remove_item={this.props.remove_item}*/}
</div>
);
}
)
)
}
else{
return(
<div>
<p>Add Your Favorite Dishes to Here</p>
</div>
);
}
}
}
CartItem.js (which render each item in the list)
export default class CartItem extends Component {
constructor(props) {
super(props);
this.state = {
show_toggle: true,
cart_item_info: this.props.Cart_item_info,
u_key: this.props.u_key,
}
//cart_item_info: this.props.Cart_item_info,
this.remove_item_handle = this.remove_item_handle.bind(this);
}
remove_item_handle(){
let {cart_item_info} = this.state;
this.props.remove_item(cart_item_info.uid);
}
render() {
let {cart_item_info, u_key} = this.state;
//console.log("Return CartItem")
return (
<div key={u_key} >
<Accordion>
<Card>
<Accordion.Toggle as={Card.Header} eventKey="0">
<div style={item_style}>
<div style={{flex: '1'}}>{u_key}.</div>
<div style={{flex: '7'}}> {cart_item_info.dish_name}</div>
<div style={{flex: '2'}}>X {cart_item_info.qty}</div>
<div style={{flex: '2'}}>${cart_item_info.Tprice}</div>
</div>
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body>
<Button onClick={this.remove_item_handle} >Remove</Button>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
);
}
}
