why first two item is not working in react? - reactjs

Question

I have generated the following four buttons but the first two button (More button) is not working.
Here is the code:
BuildControls.js
import React from 'react';
import BuildControl from './BuildControl/BuildControl';
import classes from './BuildControls.css';
const controls = [
{label:'Salad', type:'salad'},
{label:'Bacon', type:'bacon'},
{label:'Cheese', type:'cheese'},
{label:'Meat', type:'meat'}
]
const buildControls =(props)=>(
<div className={classes.BuildControls}>
<p>Current Price: <strong> {props.price} </strong> BDT</p>
{controls.map(ctrl => (
<BuildControl
label ={ctrl.label}
key={ctrl.label}
addIngredient={()=>props.addIngredients(ctrl.type)}
removeIngredient={()=>props.removeIngredient(ctrl.type)}
disabled ={props.disabled[ctrl.type]}
/>
)
)}
<button
disabled={!props.purchaseAble}
className={classes.OrderButton}
onClick ={props.ordered}> ORDER NOW</button>
</div>
);
export default buildControls;
BuildControl.js
import React from 'react';
import classes from './BuildControl.css';
const builControl =(props)=>(
<div className={classes.BuildControl}>
<div className={classes.Label}> {props.label}</div>
<button className={classes.Less} onClick={props.removeIngredient} disabled ={props.disabled}> Less</button>
<button className={classes.More} onClick={props.addIngredient}> More</button>
</div>
);
export default builControl;
as all the button is being generated by loop problem should be same for all button. last two button is working perfectly but first two is not working. It kills my day. I don't know how to debug as I am new in react js. Any help ?
update:
When I remove {classes.BuildControls} from <div className={classes.BuildControls}> it works fine. and here is the css:
.BuildControls {
width: 100%;
background-color: #CF8F2E;
display: flex;
flex-flow: column;
align-items: center;
box-shadow: 0 2px 1px #ccc;
margin: auto;
padding: 10px 0;
}
.OrderButton {
background-color: #DAD735;
outline: none;
cursor: pointer;
border: 1px solid #966909;
color: #966909;
font-family: inherit;
font-size: 1.2em;
padding: 15px 30px;
box-shadow: 2px 2px 2px #966909;
}
.OrderButton:hover, .OrderButton:active {
background-color: #A0DB41;
border: 1px solid #966909;
color: #966909;
}
.OrderButton:disabled {
background-color: #C7C6C6;
cursor: not-allowed;
border: 1px solid #ccc;
color: #888888;
}
.OrderButton:not(:disabled) {
animation: enable 0.3s linear;
}
#keyframes enable {
0% {
transform: scale(1);
}
60% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
Strange! css causes problem in click event. Whats wrong in my code?

Answer 1

Without seeing the complete code, I would guess that addIngredients should be addIngredient in buildControls :
const buildControls =(props)=>(
<div className={classes.BuildControls}>
<p>Current Price: <strong> {props.price} </strong> BDT</p>
{controls.map(ctrl => (
<BuildControl
label ={ctrl.label}
key={ctrl.label}
addIngredient={()=>props.addIngredients(ctrl.type)}
// typo here -------------------------^
If that's not it, please post the addIngredient and removeIngredient methods, including where they are defined and how they are passed down.