Hola a todos, espero que estén bien. Soy un principiante en reaccionar js y me gustaría mostrar una lista desplegable dinámica en reaccionar js. Para esto, uso el historial de mi componente secundario y le paso "datos" profesionales. cuando agrego un elemento en mi tabla "datos"

quisiera saber si alguien ya ha tenido este problema y si me puede ayudar

Historial secundario del componente

 import React, { useEffect, useState } from "react"; import imgFolder from "../assets/tree-viewer-img/folder.svg" function History({data}) { useEffect(() => { var toggler = document.getElementsByClassName("caret"); var i; for (i = 0; i < toggler.length; i++) { toggler[i].addEventListener("click", function(e) { console.log("🚀 ~ file: History.js ~ line 11 ~ e", e); this.parentElement.querySelector(".nested").classList.toggle("active"); this.classList.toggle("caret-down"); }); } }, [data]); return ( <div className="container_history"> <ul id="myUL"> {data.map((item, index) => { return ( <li key={index}> <span className="caret"> <img src={imgFolder} alt="" /> {item.name} </span> <ul className="nested"> {item.children.map((list, indexOf) => { return <li key={indexOf}>{list.name}</li>; })} </ul> </li> ); })} </ul> </div> ); } export default History;

en mis accesorios "datos"

 [ { name: "Model 3D", children: [ { name: "Geometry", children: [] }, { name: "Texture", children: [] }, ], }, ]

vista del problema