Skip to content

Instantly share code, notes, and snippets.

@samuelayo
Created March 28, 2019 16:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save samuelayo/44d66b5516f15d8ed198399b015b9c45 to your computer and use it in GitHub Desktop.
Save samuelayo/44d66b5516f15d8ed198399b015b9c45 to your computer and use it in GitHub Desktop.
// ./components/ProductList.jsx
import React from 'react'
import Total from './Total'
import Product from './Product'
export default class Products extends React.Component {
constructor(props) {
super(props);
this.state = {
total: 0,
productList: [
{
"name": "Berries",
"price": 23.54,
"description": "Sweet popsicles to help with the heat"
},
{
"name": "Orange",
"price": 10.33,
"description": "Mouth watering burger."
},
{
"name": "Lemons",
"price": 12.13,
"description": "Sumptuous egg sandwich"
}
],
};
this.calculateTotal = this.calculateTotal.bind(this);
}
showProduct(info){
alert(`Details: ${info}`)
}
calculateTotal(price) {
this.setState({
total: this.state.total + price
});
}
render() {
if (!this.state.productList) return <p>loading products! </p>
var component = this;
var products = this.state.productList.map(function(product) {
return (
<Product
name={product.name}
price={product.price}
info={product.description}
handleShow={component.showProduct}
handleTotal={component.calculateTotal}
/>
);
});
return (
<div>
{products}
<Total total={this.state.total} />
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment