question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:open
  • Created 6 years ago
  • Reactions:4
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
megaboichcommented, Jan 5, 2018

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.

1reaction
veeramarnicommented, Dec 14, 2017

@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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found