CODEWITHSUNDEEP
reactjsantd
Tania12
Tania12

Reputation: 373

React Antd Tree : get parent ID of selected Node

I'm using Tree of antd and i want to be able to console.log the parent of the selected node. This is an example : Image

When i select Leaf for example : i want to get

parent 1-0

id in the console

this is my sample code, if you have any idea please :) Thank you

Upvotes: 1

Views: 4175

Answers (1)

Bao Huynh
Bao Huynh

Reputation: 1054

I got this piece of code from antd's "Searchable" example.

const getParentKey = (key, tree) => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentKey = node.key;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey;
};

The function takes in the key of the child, and the tree data, and then it returns the parent's key. Since you want to get the parent's title, you can tweak a bit and use it in your code like this

const getParentTitle = (key, tree) => {
  let parentTitle;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentTitle = node.title;
      } else if (getParentTitle(key, node.children)) {
        parentTitle = getParentTitle(key, node.children);
      }
    }
  }
  return parentTitle;
}

const Demo = () => {
  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
    console.log(getParentTitle(selectedKeys[0], treeData))
};

  const onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
  };

  return (
    <Tree
      checkable
      defaultExpandedKeys={['0-0-0', '0-0-1']}
      defaultSelectedKeys={['0-0-0', '0-0-1']}
      defaultCheckedKeys={['0-0-0', '0-0-1']}
      onSelect={onSelect}
      onCheck={onCheck}
      treeData={treeData}
    />
  );
};

Or you can even go bigger by getting the entire parent node object, and then selectively choose which attribute you want to use

const getParentNode = (key, tree) => {
  let parentNode;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentNode = node;
      } else if (getParentNode(key, node.children)) {
        parentNode = getParentNode (key, node.children);
      }
    }
  }
  return parentNode;
}

const Demo = () => {
  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
    let parentNode = getParentNode(selectedKeys[0], treeData)
    console.log(parentNode.key, parentNode.title)
  };
  ...

You can see the entire shape of the node object if you console.log it Shape of antd Tree's node object

One of my experience using antd is that their doc does not have the best explanations so sometimes you have to go through a lot of examples to fully understand the antd API

Upvotes: 2

Related Questions