container: connect state to BuildControls, attach ingredient addition logic on More button

This commit is contained in:
oscarzhou 2020-12-10 20:13:56 +13:00
parent 24db148125
commit 527168645e
3 changed files with 37 additions and 5 deletions

View File

@ -4,9 +4,9 @@ import classes from './BuildControl.css';
const buildControl = (props) => (
<div className={classes.BuildControl}>
<div className={classes.Label}>{props.Name}</div>
<div className={classes.Label}>{props.name}</div>
<button className={classes.Less}>Less</button>
<button className={classes.More}>More</button>
<button className={classes.More} onClick={props.added}>More</button>
</div>
)

View File

@ -13,7 +13,10 @@ const controls = [
const buildControls = (props) => (
<div className={classes.BuildControls}>
{controls.map( ctrl => (
<BuildControl Key={ctrl.name} Name={ctrl.name} />
<BuildControl
key={ctrl.name}
name={ctrl.name}
added={() => props.ingredientAdded(ctrl.type) }/>
))}
</div>
)

View File

@ -4,6 +4,13 @@ import Aux from '../../hoc/Auxiliary';
import Burger from '../../components/Burger/Burger';
import BuildControls from '../../components/Burger/BuildControls/BuildControls';
const INGREDIENT_PRICE = {
salad: 0.4,
bacon: 0.8,
cheese: 0.5,
meat: 1.3,
};
class BurgerBuilder extends Component {
state = {
@ -12,14 +19,36 @@ class BurgerBuilder extends Component {
cheese: 0,
salad: 0,
bacon: 0,
}
},
totalPrice: 0,
}
addIngredientHandler = (type) => {
const oldCount = this.state.ingredients[type];
const newCount = oldCount + 1;
const updatedIngredient = {
...this.state.ingredients,
};
updatedIngredient[type] = newCount;
const priceAddition = INGREDIENT_PRICE[type];
const newPrice = this.state.totalPrice + priceAddition;
this.setState({
totalPrice: newPrice,
ingredients: updatedIngredient,
});
}
removeIngredientHandler = (type) => {
}
render() {
return (
<Aux>
<Burger ingredients={this.state.ingredients} />
<BuildControls />
<BuildControls
ingredientAdded={this.addIngredientHandler} />
</Aux>
);
};