How to edit particular object in React

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.

When you are mapping over items (or subitems) it is best practice to have a unique key for each item in the map. This key should not be the index in the array as this could change (i.e. on a delete). With a unique key React can manage the state properly and it will also help you edit the according item (or subitems).

I've added a unique_id property to your subitems (myData).

data1 = [
  {
    id: 1,
    name: "Maxi",
    myData: [
      {
        unique_id: "61225_wsadfig",
        data_name: "div1",
        data_title: "div1 tittle"
      },
      ... etc.
]

I suggest using a unique id library like uuid to generate these values.

Then, whenever you add a new item you can set the unique_id with uuid().

const Create_element = () => {
    const data_name = window.prompt("Enter Data Name");
    const data_title = window.prompt("Enter Data Title");

    if (data_name && data_title) {
      setData((data) =>
        data.map((el, i) =>
          i === active_menu
            ? {
                ...el,
                myData: [
                  ...el.myData,
                  { data_name, data_title, unique_id: uuidv4() }
                ]
              }
            : el
        )
      );
    }
  };

Finally, to edit the value of your element in question: pass a editData function as a prop like you do with your deleteData function.

I used an <input/> to record the new value of the users input. With an input make sure you set the name property of the input to this new unique_id. This will lead you to being able to match the unique_id with the input in question like so:

  const editData = (e, index) => {
    const dataName = e.currentTarget.name;
    const newValue = e.currentTarget.value;

    setData((data) =>
      data.map((dataItem, dataIndex) => {
        return {
          ...dataItem,
          myData: dataItem.myData.map((x, i) => {
            if (x.unique_id === dataName) {
              return {
                ...x,
                data_title: newValue
              };
            }
            return x;
          })
        };
      })
    );
  };

Here is a working sandbox.

You can alter your elements pretty similar as you've done with your delete functionality but instead use map function

So in order to rename your tab you can map through your whole collection, and if item has matching index, update it's name, otherwise just return same item:

const renameTab = (index) => () => {
    const newName = window.prompt("Enter New Name");
    if (newName) {
      setData(data => data.map((dataItem, idx) => {
        if (index === idx) {
          return {
            ...dataItem,
            name: newName
          }
        }

        return d;
      }));
    }
}

Here is sandbox with ability to rename tab/element and remove tab/element - please note that "E" button is to initiate edit.