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

master
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) => ( const buildControl = (props) => (
<div className={classes.BuildControl}> <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.Less}>Less</button>
<button className={classes.More}>More</button> <button className={classes.More} onClick={props.added}>More</button>
</div> </div>
) )

View File

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

View File

@ -4,6 +4,13 @@ import Aux from '../../hoc/Auxiliary';
import Burger from '../../components/Burger/Burger'; import Burger from '../../components/Burger/Burger';
import BuildControls from '../../components/Burger/BuildControls/BuildControls'; 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 { class BurgerBuilder extends Component {
state = { state = {
@ -12,14 +19,36 @@ class BurgerBuilder extends Component {
cheese: 0, cheese: 0,
salad: 0, salad: 0,
bacon: 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() { render() {
return ( return (
<Aux> <Aux>
<Burger ingredients={this.state.ingredients} /> <Burger ingredients={this.state.ingredients} />
<BuildControls /> <BuildControls
ingredientAdded={this.addIngredientHandler} />
</Aux> </Aux>
); );
}; };