loading the child asynchronously from server
See original GitHub issue@fritz-c thanks for the very great component. We want to know how we can load the children’s child asynchronously when the expand
button is clicked.
Initially, we want to send the UI just the first depth and as the user clicks on the expansion button we want to pull more data.
We sending column hasChildren
boolean for a placeholder for asynchronous data. So when the expansion is clicked it will pull additional node data from the backend.
Let me know what I need to tweak to get there.
treeData: [
{
"title": "development",
"isDirectory": true,
"hasChildren": true,
"children": [
{
"title": "examples",
"isDirectory": true,
"hasChildren": true,
},
{
"title": "private",
"isDirectory": true,
"hasChildren": true,
},
{
"title": "projects",
"isDirectory": true,
"hasChildren": true,
}
]
}
],
Issue Analytics
- State:
- Created 6 years ago
- Reactions:4
- Comments:5 (2 by maintainers)
Top Results From Across the Web
How to pass asynchronous data to the child component using ...
Using subscribe() method, I'm getting data from the server asynchronously. Only the first result object is passed onto the datafinalObject and ...
Read more >3 Ways to Pass Async Data to Angular 2+ Child Components
Solution 3: Use RxJs BehaviorSubject. We can utilize RxJs BehaviorSubject to detect the changes. I suggest you take a look at the unit...
Read more >React — Passing Asynchronous Data To A Child Component
Make a GET request to this endpoint in the Parent component. Display the message "hello world from npoint!!" in the ChildComponent component ( ......
Read more >Hierarchy of React Async Components and Fetching Data
In this guide, we are going to see some of these component hierarchy structures and learn how to fetch async data, show a...
Read more >await - JavaScript - MDN Web Docs
It can only be used inside an async function or at the top level of a module. ... all while not blocking other...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I have created another PR to include example of lazy-loading nodes and also bug fix. Actually it was working quite stable, on React 15 for a while, but now it seems that React 16 is a bit harsh about unhadled exceptions, so it was not stable when you do drag and drop over not yet loaded nodes. So in PR I tried to avoid throwing an exeption in some cases and instead handling
undefined
result was added.@fritz-c
We have created this PR for lazy loading to work. Please review and let us know.
https://github.com/fritz-c/react-sortable-tree/pull/214