Por defecto, @mui TreeView tiene todos sus nodos colapsados.

Quiero que tenga todos sus nodos expandidos por defecto, y no puedo encontrar cómo hacerlo.

Mis intentos fueron usar un método que llamé handleExpandAll pero no funciona, el navegador dice que se procesa demasiadas veces. Lo cual es raro porque sin la llamada aparentemente se renderiza 1 vez, pero con ella se renderiza una cantidad indefinida de veces.

Tal vez uno de ustedes podría ayudarme.

Por ahora mi código se ve así:

 import { useEffect } from "react"; import classes from "./TreeNavigation.module.css"; import TreeView from "@mui/lab/TreeView"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import CustomTreeItem from "../../ui/CustomTreeItem/CustomTreeItem.js"; import { apiStates } from "../Leases/useLeases.js"; import LoadingDiv from "../../ui/LoadingDiv/LoadingDiv.js"; function TreeNavigation(props) { const [expanded, setExpanded] = useState([]); const [selected, setSelected] = useState([]); const handleSelect = (event, nodeId) => { props.onItemSelected(nodeId); }; const handleToggle = (event, nodeIds) => { setExpanded(nodeIds); }; const handleExpandAll = (length) => { setExpanded((oldExpanded) => [...Array(length).keys()]); }; const data = props.data; const renderTree = (nodes) => ( <CustomTreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}> {Array.isArray(nodes.children) ? nodes.children.map((node) => renderTree(node)) : null} </CustomTreeItem> ); switch (data.state) { case apiStates.ERROR: return <p>ERROR: {data.error || "General error"}</p>; case apiStates.SUCCESS: const batimentsTreeViews = data.data.map((bat) => { var b = []; for (const key in bat) { b = { id: key, ...bat[key], }; } return renderTree(b); }); handleExpandAll(data.data.length); return ( <TreeView aria-label="controlled" defaultCollapseIcon={<ExpandMoreIcon />} defaultExpandIcon={<ChevronRightIcon />} expanded={expanded} selected={props.selectedId} onNodeToggle={handleToggle} onNodeSelect={handleSelect} sx={{ flexGrow: 1, width: "100%", maxWidth: "none", overflowY: "auto", }} > {batimentsTreeViews} </TreeView> ); default: return <LoadingDiv />; } } export default TreeNavigation;