Disculpas si esto está mal escrito (es la primera vez que publico aquí, ¡así que se agradecen los comentarios sobre cómo escribir mejor las publicaciones!)

Estoy usando el mapa de reacción para iterar a través de listas de datos.

 {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> ); } )}

Tengo un método hideMenuItem (menuItemId) que ocultará los elementos en función de sus ID, por lo que la idea es establecer el id = en el nombre del elemento, de modo que cuando se haga clic en el elemento principal, los elementos secundarios se ocultarán.

 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'); } }

Tengo 5 usos de esto: level2Folders.folderLevel2Name, el único que no funcionará es cuando intento ingresar esto como un parámetro en hideMenuItem (menuItemId), el valor aquí se devuelve como el índice del elemento.