HandleNameChange not defined

Question

import React, { useState } from "react";
import "../../css/AddMenuItem.css"
// const express = require('express')
// const app =express();
// app.use(express.json)

/**
 * Description
 * @returns {any}
 */
function MenuAdder() {
  const [ingredient, setIngredient] = useState("");
  const [quantity, setQuantity] = useState("");
  const [itemName, setItemName] = useState("");
  const [price, setPrice] = useState("");
  const [ingredients, setIngredients] = useState([]);
  const[ingDone , setIngDone] = useState(false);

  const handleAddIngredient = () => {
    const newIngredient = { name: ingredient, quantity: quantity };
    setIngredients([...ingredients, newIngredient]);
    setIngredient("");
    setQuantity("");
  };

  const handleItemNameChange = (event) => {
    setItemName(event.target.value);
  };

  const handlePriceChange = (event) => {
    setPrice(event.target.value);
  };

  const handleDoneIngredients = () => {

    console.log(ingredients);
    fetch("http://localhost:3001/addMenu", {
      method: 'POST',
      headers:{
        'Content-Type': 'application/json'
      },
      body:JSON.stringify({ingredients})
    }) .then(response => response.json())
    .then(data => {
      console.log(data);
      if(data.message ==="fault"){
        console.log("fault");
      }
      const form = document.getElementById("menuadder-form");
    form.innerHTML = `
      <label htmlFor="item-name">Item Name:</label>
      <input type="text" id="item-name" name="item-name" value="${itemName}" onChange={handleItemNameChange} required />
      <label htmlFor="price">Price:</label>
      <input type="number" id="price" name="price" value="${price}" onChange={handlePriceChange} required />
      <button type="button" onClick={handleAddOrder}>Add Order</button>
    `;
    setIngDone(true);
    })
    .catch(error => {
      
      console.error(error)
      console.log("paad");
      const form = document.getElementById("menuadder-form");
    form.innerHTML = `
      <label htmlFor="ingredient">Ingredient:</label>
      <input type="text" id="ingredient" name="ingredient" value="${ingredient}" onChange={handleIngredientChange} required />
      <label htmlFor="quantity">Quantity:</label>
      <input type="number" id="quantity" name="quantity" value="${quantity}" onChange={handleQuantityChange} required />
      <button type="button" onClick={handleAddIngredient}>Add Ingredient</button>
    `;

    });

    
  };

  const handleAddOrder = () => {
    // Do something with the item name and price (e.g. add them to an order list)
    fetch("http://localhost:3001/addmenu/completeMenu", {
      method: 'POST',
      headers:{
        'Content-Type': 'application/json'
      },
      body:JSON.stringify({'name':itemName , 'price':price})
    }) .then(response => response.json())
    .then(data => {console.log(data);})
    .catch(error => { console.error(error); });
    // Reset the form to add ingredients again
    const form = document.getElementById("menuadder-form");
    form.innerHTML = `
      <label htmlFor="ingredient">Ingredient:</label>
      <input type="text" id="ingredient" name="ingredient" value="${ingredient}" onChange={handleIngredientChange} required />
      <label htmlFor="quantity">Quantity:</label>
      <input type="number" id="quantity" name="quantity" value="${quantity}" onChange={handleQuantityChange} required />
      <button type="button" onClick={handleAddIngredient}>Add Ingredient</button>
    `;
  };

  /**
   * Description
   * @param {any} event
   * @returns {any}
   */
  const handleIngredientChange = (event) => {
    setIngredient(event.target.value);
  };

  /**
   * Description
   * @param {any} event
   * @returns {any}
   */
  const handleQuantityChange = (event) => {
    setQuantity(event.target.value);
  };

  

  return (
    <div id="menuadder">
      <h3>Add Ingredients</h3>
      <form id="menuadder-form">
        <label htmlFor="ingredient">Ingredient:</label>
        <input type="text" id="ingredient" name="ingredient" value={ingredient} onChange={handleIngredientChange} required />
        <label htmlFor="quantity">Quantity:</label>
        <input type="number" id="quantity" name="quantity" value={quantity} onChange={handleQuantityChange} required />
        <button type="button" onClick={handleAddIngredient}>Add Ingredient</button>
        {ingredients.length > 0 && (
          <div>
            <h3>Added Ingredients:</h3>
            <ul>
              {ingredients.map((ingredient, index) => (
                <li key={index}>{ingredient.name} - {ingredient.quantity}</li>
              ))}
            </ul>
          </div>
        )}
        {ingredients.length > 0 && (
          <button type="button" onClick={handleDoneIngredients}>Done with Ingredients</button>
        )}
        {ingDone &&(
          <input type="text" id="item-name" name="item-name" value="${itemName}" onChange={handleItemNameChange} required />
        )}
        {ingDone && (
          <input type="number" id="price" name="price" value="${price}" onChange={handlePriceChange} required />
        )}
        {ingDone && (
          <button type="button" onClick={handleAddOrder}>Add Order</button>
        )
        }
      </form>
    </div>
  );
}

export default MenuAdder;

I don't understand why it is not detecting handleItemNameChange, handlePriceChange or handleAddOrder.I tried changing the handlers and put the calls to them in the return statement but that didn't help either

I tried adding the handles to the return value since I thought it wasn't detecting it before for being in the inner form thing but it still isn't working. Any help would be appreciated

Answer 1

In the handleDoneIngredients function, when the response is successful, the form.innerHTML is set to some HTML strings. This is not a recommended practice in React because it overrides the DOM managed by React and may cause the state and event handlers of the components to malfunction.

React.js: Set innerHTML vs dangerouslySetInnerHTML