React Material UI tree view - Getting root node info on child node onNodeSelect

Question

I have a tree view code like below

    <TreeView
      defaultCollapseIcon={<ArrowCircleUpIcon />}
      defaultExpandIcon={<ArrowCircleDownIcon />}
      onNodeSelect={handleChange}
      sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
    >
      {loop(values)}
    </TreeView>

And the handleChange method like below

 const handleChange = async (event, node) => {
    console.log('nodeId: ', node)   
}

And my doubt here is, in the handleChange method I'm getting selected node info using node argument. But what I want to achieve is to get the parent of the selected node or whole parent hierarchy Like A has a child B node, B has child C node. So if I select C whether I will get all the A,B,C node infos. I'm new to react please help me.

Answer 1

Directly from the MUI documentation:

event: The event source of the callback nodeIds: Ids of the selected nodes. When multiSelect is true this is an array of strings; when false (default) a string.

This means that nodeIds will contain only the id of the selected node when multiSelect is not true(your scenario).

You can get the entire hierarchy for C node by using the id from nodeIds and looking it up in your array.

[SECOND EDIT] Hope this helps:

import React, { useEffect, useState } from "react";
import TreeView from "@mui/lab/TreeView";
import TreeItem from "@mui/lab/TreeItem";

export const TreeViewFile = () => {
  const [selectedNode, setSelectedNode] = useState({});
  const [selectedRoot, setSelectedRoot] = useState({});

  useEffect(() => {
    // This will be called for each new value of selectedNode, including the initial empty one
    // Here is where you can make your API call
    console.log("selectedNode", selectedNode);
    console.log("selectedRoo", selectedRoot);
  }, [selectedNode, selectedRoot]);

  const handleChange = (event, nodeId) => {
    treeViewArr.forEach((treeRoot) => {
      if(treeRoot.id === nodeId){
        setSelectedRoot(treeRoot);
        setSelectedNode(treeRoot);
        return
      }

      handleSelectedNode(treeRoot.childNodes, treeRoot, nodeId);
    });
  };

  const handleSelectedNode = (childNodes, treeRoot, nodeId) => {
    if (!childNodes) {
      return;
    }

    for (let i = 0; i < childNodes.length; i++) {
      let childNode = childNodes[i];
      if (childNode.id === nodeId) {
        setSelectedRoot(treeRoot);
        setSelectedNode(childNode);
        return;
      }

      handleSelectedNode(childNode.childNodes || [], treeRoot, nodeId);
    }
  };

  const displayTreeView = (treeViewArray) => {
    if (!treeViewArray) {
      return null;
    }
    return treeViewArray.map((treeViewItem) => {
      return (
        <TreeItem
          key={treeViewItem.id}
          nodeId={`${treeViewItem.id}`}
          label={treeViewItem.title}
        >
          {displayTreeView(treeViewItem.childNodes)}
        </TreeItem>
      );
    });
  };

  return (
    <>
      This is the selectedNode: {selectedNode?.title}
      <TreeView
        onNodeSelect={handleChange}
        sx={{ height: 240, flexGrow: 1, maxWidth: 800, overflowY: "auto" }}
      >
        {displayTreeView(treeViewArr)}
      </TreeView>
    </>
  );
};

const treeViewArr = [
  {
    id: "1",
    title: "First Parent Node",
    childNodes: [
      {
        id: "2",
        parentId: "1",
        title: "First Child Node of First Parent Node",
        childNodes: [
          {
            id: "3",
            parentId: "2",
            title: "First Child Node of First Child Node",
          },
        ],
      },
      {
        id: "4",
        parentId: "1",
        title: "Second Child Node of First Parent Node",
        childNodes: [
          {
            id: "5",
            parentId: "4",
            title: "First Child Node of Second Child Node",
          },
        ],
      },
    ],
  },
  {
    id: "6",
    title: "Second Parent Node",
    childNodes: [
      {
        id: "7",
        parentId: "6",
        title: "First Child Node of Second Parent Node",
        childNodes: [
          {
            id: "8",
            parentId: "7",
            title: "First Child Node of First Child Node of Second Parent Node",
          },
        ],
      },
      {
        id: "9",
        parentId: "6",
        title: "Second Child Node",
        childNodes: [
          {
            id: "10",
            parentId: "9",
            title:
              "First Child Node of Second Child Node of Second Parent Node",
          },
        ],
      },
    ],
  },
];