javascript - How to collapse and expand antd TreeSelect items on click of a button?

Question

I am using antd library for developing my website. I am using TreeSelect component to show some nested options and successfully i have implemented.

But I am facing an issue below: I am trying to expand and collapse TreeSelect items on click of a button. Can anyone help me on this?

Below code i am using for button event

expandCollapseOpions = () => {
    this.setState({
      isExpandCollpase: !this.state.isExpandCollpase
    });
}; 

Below attribute I am using, which is not correct I feel.

treeDefaultExpandAll={this.state.isExpandCollpase}

Complete Code:

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { TreeSelect } from "antd";

const { TreeNode } = TreeSelect;

class Demo extends React.Component {
  state = {
    value: undefined,
    isExpandCollpase: true
  };

  onChange = value => {
    console.log(value);
    this.setState({ value });
  };

  expandCollapseOpions = () => {
    this.setState({
      isExpandCollpase: !this.state.isExpandCollpase
    });
  };

  render() {
    return (
      <div>
        <button onClick={() => this.expandCollapseOpions()}>
          Expand/Collapse Options
        </button>
        <br />
        <br />
        <TreeSelect
          showSearch
          multiple
          style={{ width: "100%" }}
          value={this.state.value}
          dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
          placeholder="Please select"
          allowClear
          treeDefaultExpandAll={this.state.isExpandCollpase}
          onChange={this.onChange}
        >
          <TreeNode value="parent 1" title="parent 1" selectable={false}>
            <TreeNode value="A" title="A" selectable={false}>
              <TreeNode value="leaf1" title="my leaf" />
              <TreeNode value="leaf2" title="your leaf" />
            </TreeNode>
          </TreeNode>
          <TreeNode value="parent 2" title="parent 2" selectable={false}>
            <TreeNode value="B" title="B" selectable={false}>
              <TreeNode
                value="sss"
                title={<b style={{ color: "#08c" }}>sss</b>}
              />
            </TreeNode>
          </TreeNode>
        </TreeSelect>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById("container"));

stackblitz link

App URL

I am trying to implement below:

On 1st click of Expand/Collapse Options button

On 2nd click of Expand/Collapse Options button

Answer 1

I found the solution for this issue.

So need to remove the component and again need to add the component.

 expandCollapseOpions = async () => {
    await this.setState({
      isExpandCollpase: !this.state.isExpandCollpase
    });
    await this.setState({
      isExpandCollpase: !this.state.isExpandCollpase
    });
  };

DOM condition

{this.state.isExpandCollpase ? (
          <TreeSelect
            showSearch
            multiple
            style={{ width: "100%" }}
            value={this.state.value}
            dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
            placeholder="Please select"
            allowClear
            onChange={this.onChange}
            labelInValue={true}
          >
            <TreeNode value="parent 1" title="parent 1" selectable={false}>
              <TreeNode value="A" title="A" selectable={false}>
                <TreeNode value="leaf1" title="my leaf" />
                <TreeNode value="leaf2" title="your leaf" />
              </TreeNode>
            </TreeNode>
            <TreeNode value="parent 2" title="parent 2" selectable={false}>
              <TreeNode value="B" title="B" selectable={false}>
                <TreeNode
                  value="sss"
                  title={<b style={{ color: "#08c" }}>sss</b>}
                />
              </TreeNode>
            </TreeNode>
          </TreeSelect>
        ) : null}

stackblitz link