'Hello, I am using antd treeselect in my react js project . and when i am clicking on parent node child options are not appearing
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>
);
}
}
Solution 1:[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>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | MrCodingB |