How to edit particular object in React

Question

I have created a UI from my JSON data in react, where I am creating tab and nested some elements in each tab which is working fine.

I have a delete button for each tab so when I click delete it is removing that particulate tab.

I am also nesting elements inside my tabs, so now I am trying to delete those elements on click of the corresponding button, but I am getting an error.

To create new tab I am doing this:

      const addNewTab = () => {
        const name = window.prompt("Enter Name");
        if (name) {
          setData((data) => [...data, new Data(id, name)]);
        }
      };

And to create new elements inside that tab:

      const Create_element = () => {
        const data_name = window.prompt("Enter Data Name");;
        if (data_name ) {
          setData((data) =>
            data.map((el, i) =>
              i === active_menu
                ? {
                    ...el,
                    myData: [...el.myData, { data_name,  }]
                  }
                : el
            )
          );
        }
      };

To delete the tab:

    setData((data) => data.filter((_, i) => i !== index));

  const deleteData = (index) => {
    console.log("delete", index);
    setData((data) =>
      data.map((dataItem, dataIndex) =>
        dataIndex === active_menu
          ? {
              ...data[dataIndex],
              myData: data[dataIndex].myData.filter((_, i) => index !== i)
            }
          : dataItem
      )
    );
  };

Edit / Update

I just want to edit the name of tab as well as the name of my nested elements name.

Code Sandbox I have added delete functionality, now just want to edit Tab name and elements name inside each tab

Edit / Update

How can I update the name of particular element inside the tabs

Answer 1

create json like :

const tabJSON = {"home":"<element>","contact":"<element", ...}

assign that to state in hooks :

const [tab, setTab] = useState(tabJSON);

onClick pass key like:

onClick={()=>handleClick(key)}

in handleClick update tab

handleClick=param=>{
   const updatedTab = {...tab};
   if(param in tab){
     delete updatedTab[param]; //remove updated tab and its content
 }
    setTab(updatedTab); 
}

for update Tab:

const handlEditTab=(index,tabName)=>{
    const newTabName = prompt(`Rename ${tabName}`);
    /**
     * here any layover form can be used or any condition also can be put for tab name
     */
    if(tabName){
      const newTabs = [...data];
      const indexOfElement = newTabs.findIndex(obj=>obj.id===index);
      newTabs[indexOfElement].name= newTabName;
      setData(newTabs)
    }
  }

in JSX call this function like given:

...
<div onDoubleClick={()=>handlEditTab(li.id,li.name)} className="dashboard_name col-10 col-sm-10 col-md-9 col-lg-10 col-xl-10">
...

here is the working example. here I used double click to update and single click to select, you can update it accordingly as per requirement.