Apologies if this is poorly written (first time posting here so feedback on how to better write posts welcome!)

I am using react map to iterate through lists of data.

                          {level1Folders.level2Folders.map(
                        (level2Folders, index) => {
                          return (
                            <li
                              id={level2Folders.folderLevel2Name}
                              key={level2Folders.folderLevel2Name + index}
                            >
                              <div
                                className="menu-item-folder-level-2"
                                onClick={() =>
                                  hideMenuItem(
                                    level2Folders.folderLevel2Name
                                  )
                                }
                              >
                                <FaIcons.FaCaretRight />
                                {level2Folders.folderLevel2Name}
                              </div>

                              <ul
                                className="manuals d-none"
                                id={level2Folders.folderLevel2Name}
                              >
                                {level2Folders.manuals.map(
                                  (manual, index) => {
                                    return (
                                      <li key={manual + index} id={manual}>
                                        <div
                                          onClick={() =>
                                            handleExplorerItemClick(manual)
                                          }
                                          className="menu-item-manual"
                                        >
                                          {manual}
                                        </div>
                                      </li>
                                    );
                                  }
                                )}

I have a method hideMenuItem(menuItemId) which will hide items based on their id's, so the idea is to set the id = to the name of the item, so when the parent item is clicked the child elements will be hidden.

  function hideMenuItem(menuItemId) {
console.log(menuItemId);
let x = document.getElementById(menuItemId);
if (x.classList.contains('d-block')) {
  x.classList.add('d-none');
  x.classList.remove('d-block');
} else {
  x.classList.add('d-block');
  x.classList.remove('d-none');

}
 }

I have 5 uses of this - level2Folders.folderLevel2Name, the only one that won't work is when trying to enter this as a parameter in hideMenuItem(menuItemId), the value here is returned as the index of the item.