The function does not work when I click the button

Question

My buttons:

<div className="ingrBtns">
    <button className="ingrBtn" 
            onClick={() => addRemoveIngredient('add','lettuce')}>
            +
    </button>
    <button className="ingrBtn" 
            onClick={() => addRemoveIngredient('remove','lettuce')}>
            -
    </button>
    <div className="price"> 
         &nbsp;&nbsp;&nbsp;${(state.lettuce*0.5).toFixed(2)}
    </div>
</div>

The function does not work when I click the button. Where is the problem ?

Answer 1

You must use the keyword "this"

<div className="ingrBtns">
    <button className="ingrBtn" onClick={() => this.addRemoveIngredient('add','lettuce')}>+</button>
    <button className="ingrBtn" onClick={() => this.addRemoveIngredient('remove','lettuce')}>-</button>
    <div className="fiyat"> &nbsp;&nbsp;&nbsp;${(this.state.lettuce*0.5).toFixed(2)}</div>
</div>