React: Nested Array Form - Input field onChange handler

The form data is set by an the data object. Need help figuring out how to update /handleChange the text inputs

I've tried unique name, those probably won't work because it wont match the "key" in the object. Any help / input is appreciated!

Data:

export default    {      name: "Restaurants Name",      menu: [        {          category: "Appetizers",          items:            [ {                imgurl: "https://source.unsplash.com/400x200/?863127",                title: "Food 2",                desc: "",                price: "500"              },              {                imgurl: "",                title: "Food 1",                desc: "",                price: "300"              }            ]        },  {          category: "Entree",          items:            [ {                imgurl: "https://source.unsplash.com/400x200/?863127",                title: "Entree 1",                desc: "",                price: "500"              },              {                imgurl: "",                title: "Entree 1",                desc: "",                price: "300"              }            ]        },      ]    }  

Code:

import React, { useEffect, useState } from "react";  import "./../App.css"  import MenuData from "../data"      function Edit() {      const [formState, setFormState] = useState(MenuData);      useEffect(() => {      console.log(formState)    }, []);          const handleNameChange = (event) => {            const name = event.target.name;      // console.log(name)        setFormState(prevState => ({        formState: {                   // object that we want to update            ...prevState.formState,    // keep all other key-value pairs            [name]: event.target.value,      // update the value of specific key              menu: {              ...prevState.menu,              items: {                ...prevState.menu.items              }            }                  }      }))        // setFormState({      //   ...formState,      //   [name]: event.target.value,      // })          };      const handleChange = (categoryIndex, event) => {            // const values = [...formState]      // values[categoryIndex][event.target.name] = event.target.value;      // setFormState(values);      const name = event.target.name;        // setFormState(prevState => ({      //   formState: {      //     ...prevState.formState,      //     menu: {      //       ...prevState.menu,      //       items{      //         ...prevState.items      //       }      //     }      //   }      // }));        };      return (      <div className="App">              <div>              <input name="nameField" id="nameField" maxLength="300" value={formState.name} onChange={handleNameChange} /> <br />                                    {formState.menu && formState.menu.map((menuitem, categoryIndex) => {                  return (                    <div key={categoryIndex}>                      <div class="line"></div>                      <h2>{menuitem.category}</h2>                         <input name={"category-" + categoryIndex} id="CategoryField" maxLength="40" categoryIndex={categoryIndex} onChange={event => handleChange(categoryIndex, event)} value={menuitem.category} />                        {                          menuitem.items.map((item, index) => {                            return(                              <div key={index}>                                <input name={"title-" + index + categoryIndex} id="titleField" maxLength="40" categoryIndex={categoryIndex} onChange={handleChange} value={item.title} /> <br />                                <input name="desc" id="descField" maxLength="200" categoryIndex={categoryIndex} onChange={handleChange} value={item.desc} />                                 <br /><br />                              </div>                            )                          })                        }                     </div>                  )                }              )            }                          </div>      </div>    );  }    export default Edit;      

UPDATED

• Not able to figure out the onChange function to updated nested items

https://stackoverflow.com/questions/66572995/react-nested-array-form-input-field-onchange-handler March 11, 2021 at 05:17AM