Hello, I am using antd treeselect in my react js project . and when i am clicking on parent node child options are not appearing

Question

const treeData = [
  {
      title: '0-1',
      value: '0-1',
      key: '0-1',
   
  },
  {
    title: '0-2',
      value: '0-2',
      key: '0-2',
      children: [
          {
              title: '0-0-2',
              value: '0-0-2',
              key: '0-0-2',
          },
         
         
      ],
  },
  
  {
      title: '0-3',
      value: '0-3',
      key: '0-3',

  },
];

Here is my json data which i will get from api .

 renderTreeNodes = data =>
    data.map(item => {
    
      if (item.children) {
        return (
         <TreeNode title={item.title} key={item.key} dataRef={item} isLeaf={false}>
          {this.renderTreeNodes(item.children)}
        </TreeNode>
        );
      }
      return <TreeNode key={item.key} {...item}  title={item.title} dataRef={item}  />;
    });


  render() {
    return (
      <Fragment>
      
        <TreeSelect
        treeCheckable={true}
        value={this.state.value}
                            className="treeSelect"
                            virtual={false}
                            style={{ width: 300 }}
                            treeCheckable
                            maxTagCount={20}
                            allowClear
                            showSearch
                            value={this.state.value}
                            closeMenuOnSelect={false}
                            placeholder="Please select SGC's"
                            allowClear
                            multiple
                            onChange={this.onChange} >{this.renderTreeNodes(treeData)}
                        </TreeSelect>
       
      </Fragment>
    );
  }
}

Answer 1

I have resolved this by maping data inside treeData. working fine now.

<TreeSelect
  treeCheckable={true}
  value={this.state.value}
  className="treeSelect"
  virtual={false}
  style={{ width: 300 }}
  treeCheckable
  maxTagCount={20}
  allowClear
  showSearch
  value={this.state.value}
  closeMenuOnSelect={false}
  placeholder="Please select SGC's"
  allowClear
  multiple
  treeData={treeData.map((d,i )  => ({
    title: d.title,
    value:  d.value,
    match: d.match,
    key: d.key,
    children: d.children                     
  }))}
  onChange={this.onChange}>
</TreeSelect>