Convert class component to functional component in ReactJS

Can some please convert this entire code into functional based component code ? This code below is entirely based on Class Components. I want to convert it to functional component but since i am new to React everytime functional component is giving some error.So, please someone change it to functional component (entire code)

import React, { Component, useState } from "react";
import "./Burger.css";
class Burger extends Component {
  state = {          `State that is to be used in entire program`
    salad: 0,
    chicken: 0,
    cheese: 0,
    tomato: 0,
  };
  addRemoveIngredient = (action, ingredient) => {   `Method`
    let { salad, chicken, cheese, tomato } = this.state;
    let stateValue;
    switch (ingredient) {
      case "salad": {
        stateValue = salad;
        break;
      }
      case "chicken": {
        stateValue = chicken;
        break;
      }
      case "cheese": {
        stateValue = cheese;
        break;
      }
      case "tomato": {
        stateValue = tomato;
        break;
      }
      default:
        break;
    }
    if (action === "add") {
      stateValue = stateValue + 1;
    } else {
      stateValue = stateValue - 1;
    }
    this.setState({
      [ingredient]: stateValue >= 0 ? stateValue : 0,
    });
  };
  burgerContent = () => {
    let { salad, chicken, cheese, tomato } = this.state;
    let burger = [];
    for (let i = 0; i < salad; i++) {
      burger.push(<div key={burger.length} className="Salad"></div>);
    }
    for (let i = 0; i < chicken; i++) {
      burger.push(<div key={burger.length} className="Chicken"></div>);
    }
    for (let i = 0; i < cheese; i++) {
      burger.push(<div key={burger.length} className="Cheese"></div>);
    }
    for (let i = 0; i < tomato; i++) {
      burger.push(<div key={burger.length} className="Tomato"></div>);
    }
    return burger;
  };
  render() {
    return (
      <>
        <div className="Burger">
          <div className="burgerTop"></div>
          {this.burgerContent()}
          <div className="burgerBottom"></div>
        </div>
        <div className="Controls">
          <p>Salad</p>
          <div className="controlButton">
            <button
              onClick={() => this.addRemoveIngredient("add", "salad")}
              className="controlButtons"
            >
              Add
            </button>
            <button
              onClick={() => this.addRemoveIngredient("remove", "salad")}
              className="controlButtons"
            >
              Remove
            </button>
          </div>
          <p>Chicken</p>
          <div className="controlButton">
            <button
              onClick={() => this.addRemoveIngredient("add", "chicken")}
              className="controlButtons"
            >
              Add
            </button>
            <button
              onClick={() => this.addRemoveIngredient("remove", "chicken")}
              className="controlButtons"
            >
              Remove
            </button>
          </div>
          <p>Cheese</p>
          <div className="controlButton">
            <button
              onClick={() => this.addRemoveIngredient("add", "cheese")}
              className="controlButtons"
            >
              Add
            </button>
            <button
              onClick={() => this.addRemoveIngredient("remove", "cheese")}
              className="controlButtons"
            >
              Remove
            </button>
          </div>
          <p>Tomato</p>
          <div className="controlButton">
            <button
              onClick={() => this.addRemoveIngredient("add", "tomato")}
              className="controlButtons"
            >
              Add
            </button>
            <button
              onClick={() => this.addRemoveIngredient("remove", "tomato")}
              className="controlButtons"
            >
              Remove
            </button>
          </div>
        </div>
      </>
    );
  }
}
export default Burger;

Answer

Here you go …

import React, { Component, useState } from "react";
import "./Burger.css";
export default function Burger() {
  const [stateValues, setStateValues] = useState({
    salad: 0,
    chicken: 0,
    cheese: 0,
    tomato: 0
  });

  const addRemoveIngredient = (action, ingredient) => {
    let { salad, chicken, cheese, tomato } = stateValues;
    let stateValue;
    switch (ingredient) {
      case "salad": {
        stateValue = salad;
        break;
      }
      case "chicken": {
        stateValue = chicken;
        break;
      }
      case "cheese": {
        stateValue = cheese;
        break;
      }
      case "tomato": {
        stateValue = tomato;
        break;
      }
      default:
        break;
    }
    if (action === "add") {
      stateValue = stateValue + 1;
    } else {
      stateValue = stateValue - 1;
    }
    setStateValues({
      ...stateValues,
      [ingredient]: stateValue >= 0 ? stateValue : 0
    });
  };

  const burgerContent = () => {
    let { salad, chicken, cheese, tomato } = stateValues;
    let burger = [];
    for (let i = 0; i < salad; i++) {
      burger.push(<div key={burger.length} className="Salad"></div>);
    }
    for (let i = 0; i < chicken; i++) {
      burger.push(<div key={burger.length} className="Chicken"></div>);
    }
    for (let i = 0; i < cheese; i++) {
      burger.push(<div key={burger.length} className="Cheese"></div>);
    }
    for (let i = 0; i < tomato; i++) {
      burger.push(<div key={burger.length} className="Tomato"></div>);
    }
    return burger;
  };
  return (
    <>
      <div className="Burger">
        <div className="burgerTop"></div>
        {this.burgerContent()}
        <div className="burgerBottom"></div>
      </div>
      <div className="Controls">
        <p>Salad</p>
        <div className="controlButton">
          <button
            onClick={() => addRemoveIngredient("add", "salad")}
            className="controlButtons"
          >
            Add
          </button>
          <button
            onClick={() => addRemoveIngredient("remove", "salad")}
            className="controlButtons"
          >
            Remove
          </button>
        </div>
        <p>Chicken</p>
        <div className="controlButton">
          <button
            onClick={() => addRemoveIngredient("add", "chicken")}
            className="controlButtons"
          >
            Add
          </button>
          <button
            onClick={() => addRemoveIngredient("remove", "chicken")}
            className="controlButtons"
          >
            Remove
          </button>
        </div>
        <p>Cheese</p>
        <div className="controlButton">
          <button
            onClick={() => addRemoveIngredient("add", "cheese")}
            className="controlButtons"
          >
            Add
          </button>
          <button
            onClick={() => addRemoveIngredient("remove", "cheese")}
            className="controlButtons"
          >
            Remove
          </button>
        </div>
        <p>Tomato</p>
        <div className="controlButton">
          <button
            onClick={() => addRemoveIngredient("add", "tomato")}
            className="controlButtons"
          >
            Add
          </button>
          <button
            onClick={() => addRemoveIngredient("remove", "tomato")}
            className="controlButtons"
          >
            Remove
          </button>
        </div>
      </div>
    </>
  );
}