add disabled props

parent f050a0af
...@@ -5,13 +5,14 @@ interface Props { ...@@ -5,13 +5,14 @@ interface Props {
type: IngredientNames type: IngredientNames
lessHandler: VoidFunction lessHandler: VoidFunction
moreHandler: VoidFunction moreHandler: VoidFunction
disabled: boolean;
} }
const BuildControl = ({type, moreHandler, lessHandler}: Props) => { const BuildControl = ({disabled, type, moreHandler, lessHandler}: Props) => {
return ( return (
<div className="BuildControl"> <div className="BuildControl">
<div className="Label">{type}</div> <div className="Label">{type}</div>
<button className="Less" onClick={lessHandler}>Less</button> <button className="Less" disabled={disabled} onClick={lessHandler}>Less</button>
<button className="More" onClick={moreHandler}>More</button> <button className="More" onClick={moreHandler}>More</button>
</div> </div>
); );
......
...@@ -23,6 +23,7 @@ const BuildControls = ({ingredients, price, lessHandler, moreHandler}: Props) => ...@@ -23,6 +23,7 @@ const BuildControls = ({ingredients, price, lessHandler, moreHandler}: Props) =>
type={ingKey as IngredientNames} type={ingKey as IngredientNames}
moreHandler={() => moreHandler(ingKey as IngredientNames)} moreHandler={() => moreHandler(ingKey as IngredientNames)}
lessHandler={() => lessHandler(ingKey as IngredientNames)} lessHandler={() => lessHandler(ingKey as IngredientNames)}
disabled={!Boolean(ingredients[ingKey as IngredientNames])}
/> />
)) ))
} }
......
import { ReactNode } from 'react'; import { ReactNode, useState } from 'react';
import { IngredientNames, Ingredients } from '@/interfaces/Ingredients'; import { IngredientNames, Ingredients } from '@/interfaces/Ingredients';
import Ingredient from './Ingredient/Ingredient'; import Ingredient from './Ingredient/Ingredient';
import './Burger.css'; import './Burger.css';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment