How to create new divs inside for loop and show the result in React

Question

I'm working on a burger project.

When add buttons are clicked, the ingredient should be added. When remove buttons are clicked, the ingredient should be removed.

The problem I am having right now is when the buttons are clicked, nothing has happened.

Here's how state is setup:

    constructor(props) {
        super(props)
    
        this.state = {
             lettuce: 0,
             tomato: 0,
             cheese: 0,
             meat: 0
        }
    }

The button:

 let ingredients = ['lettuce', 'tomato', 'cheese', 'meat']
{
                        ingredients.map((ingredient, index) => {
                            return(
                            <div key={index}>
                                <p>{ingredient}</p>
                                <div className="ingredientButtons">
                                <button onClick={()=>this.addRemoveIngredient('add', ingredient)} className="ingrBtn">Add</button>
                                <button onClick={()=>this.addRemoveIngredient('remove', ingredient)} className="ingrBtn">Remove</button>
                                </div>
                            </div>
                            )
                        })
                    }

Button Handler:

    addRemoveIngredient = (action, ingredient) => {
        let stateValue = this.state[ingredient];

        console.log(`before: ${stateValue}`)

        action === 'add' ? stateValue = stateValue + 1 : stateValue = stateValue - 1 
        console.log(`after: ${stateValue}`)

        this.setState({
            [ingredient]: stateValue < 0 ? 0 : stateValue
        })

        console.log(this.state)
    }

When Add under lettuce is clicked.

Methods that show the ingredients

    showIngredient = (ingredient) => {
        let burger = []
        for(let i = 0; i < this.state[ingredient]; i++){
            burger.push(<div key = {i} className={ingredient}></div>)
        }

        return burger
    }

    burger = () => {
        let ingredients = ['lettuce', 'tomato', 'cheese', 'meat']

        ingredients.map((ingredient, index) => {
            return (
                <div key ={index}>
                    {
                        this.showIngredient(ingredient)
                    }
                </div>
            )
        })

The css that gets the image

.lettuce{
    background-image: url("../assets/lettuse.jpg");
    background-size: 300px;
    height: 27px;
    width: 100%;
    display: table;
    background-repeat: no-repeat;
    background-position: center;

Show ingredients in render function

                <div className="burgerIngredients"> 
                    <div className="topSide"></div> 
                        {this.burger()}
                    <div className="bottomSide"></div> 
                </div>
}

I'm not sure why nothing is showing. Thank you for your time.

Answer 1

I have tried to replicate the functionality but looks like fine for me. Can you update here what is wrong. Also check console its updating correct: Code:

import React from "react";
import "./style.css";

class App extends React.Component{

  constructor(props) {
        super(props)
    
        this.state = {
             lettuce: 0,
             tomato: 0,
             cheese: 0,
             meat: 0
        }
    }

    addRemoveIngredient = (action, ingredient) => {
        let stateValue = this.state[ingredient];

        action === 'add' ? stateValue = stateValue + 1 : stateValue = stateValue - 1 

        this.setState({
            [ingredient]: stateValue >= 0 ? stateValue : 0
        },() => {
          console.log(this.state)
        })
    }

  showIngredient = (ingredient) => {
      let burger = []
      for(let i = 0; i < this.state[ingredient]; i++){
          burger.push(<div key = {i} className={ingredient}>{this.state[ingredient]}</div>)
      }

      return burger
  }

  burger = () => {
      let ingredients = ['lettuce', 'tomato', 'cheese', 'meat']

      return ingredients.map((ingredient, index) => {
          return (
              <div key ={index}>
                  {
                      this.showIngredient(ingredient)
                  }
              </div>
          )
      })
  }

  renderButton = () => {
     let ingredients = ['lettuce', 'tomato', 'cheese', 'meat']

        return ingredients.map((ingredient, index) => {
            return(
            <div key={index}>
                <p>{ingredient}</p>
                <div className="ingredientButtons">
                <button onClick={()=>this.addRemoveIngredient('add', ingredient)} className="ingrBtn">Add</button>
                <button onClick={()=>this.addRemoveIngredient('remove', ingredient)} className="ingrBtn">Remove</button>
                </div>
            </div>
            )
        })
                    
  }
  

  
  render(){
    return(<div className="burgerIngredients"> 
                    <div className="topSide"></div> 
                        {this.burger()}
                    <div className="bottomSide"></div>
                    {this.renderButton()} 
                </div>)
  }
}

export default App;

Demo: https://stackblitz.com/edit/react-u2uzjb