Making simple Collapse-CodePudding

I am using react-organizational-chart in it's simplest way https://codesandbox.io/s/quiet-water-yx1l3g?file=/src/StyledTreeExample.js I need to add collapse to the nodes I have found this https://codesandbox.io/s/corporate-hierarchy-1pbs0s but I didn't understand how to make the collapse condition on my code cuz it has got two components. this is the only section I need

const [collapsed, setCollapsed] = React.useState(o.collapsed);
  const handleCollapse = () => {
    setCollapsed(!collapsed);
  };
  React.useEffect(() => {
    o.collapsed = collapsed;
  });
  const T = parent
    ? TreeNode
    : (props) => (
        <Tree
          {...props}
          lineWidth={"2px"}
          lineColor={"#bbc"}
          lineBorderRadius={"12px"}
        >
          {props.children}
        </Tree>
      );
  return collapsed ? (
    <T
      label={
        <Organization
          org={o}
          onCollapse={handleCollapse}
          collapsed={collapsed}
        />
      }
    />
  ) : (
    <T
      label={
        <Organization
          org={o}
          onCollapse={handleCollapse}
          collapsed={collapsed}
        />
      }
    >
      {_.map(o.account, (a) => (
        <TreeNode label={<Account a={a} />}></TreeNode>
      ))}
      {_.map(o.organizationChildRelationship, (c) => (
        <Node o={c} parent={o} />
      ))}
    </T>
  );
}

but how I can do that with my code and this is my code

const getLabel = (name) => {
  return (
    <div className="card">
      {name}
      <div>
        hello
        <button onClick={() => console.log(`clicked ${name}`)}>clickme</button>
      </div>
      <div className="box">N</div>
    </div>
  );
};
const getTreenode = (child) => {
  return child?.map((obj) => {
    return (
      <TreeNode label={getLabel(obj.name)}>
        {obj.child && getTreenode(obj.child)}
      </TreeNode>
    );
  });
};

const StyledTreeExample = () => (
  <Tree
    className="root"
    lineWidth={"2px"}
    lineColor={"green"}
    lineBorderRadius={"10px"}
    label={<div className="card">Root</div>}
  >
    {getTreenode(data)}
  </Tree>
);

export default StyledTreeExample;

I don't know Can you help please I really need this

CodePudding user response：

There is another way to make collapse.

Use deatils tag.

<details>
<summary>Click to open</summary>
<p>If your browser supports this element, it should allow you to expand and collapse these details.</p></details>

CodePudding user response：

It seems that the actual project is using a different approach to populate the tree, compared to the posted example. The specific library also does not seem to provide official instructions on this.

As an experiment, I tried to implement collapse in forked project by making getTreenode a recursive component and added a collapsed state inside. Some additional styles would be needed, but functionality seems to be working.

Not sure if it might suit the use case, but here is the experimental implement on: codesandbox

//