CODEWITHSUNDEEP
reactjsantdreact-dropdown-tree-select
slashdot
slashdot

Reputation: 786

How to load data dynamically upon clicking second level?

I am populating 2 level of data as shown in picture from Rest API. I have another Rest API that I need to call async to populate third level. For example, if someone clicks/expands 'Russia 1', I need to trigger HTTP Get to load childrens for 'Russia 1'.

enter image description here

I am trying to use loadData={this.onLoadData} but the problem is that it gets called every time, even when I am expanding 'RUSSIA' i.e. level 1. I want it to be restrictive such that it gets called only at the second level. Is there any way I can do it?

Here is the sample code https://codesandbox.io/s/festive-banzai-0zwnl

Upvotes: 0

Views: 481

Answers (1)

Giovanni Esposito
Giovanni Esposito

Reputation: 11156

Ciao, you could put an if based on value and discriminate what kind of GET you want to call. Something like:

    onChange = (value) => {
      console.log(value);
      if (value === "2") {
         console.log("HTTP Get data Russia-1");
      } else if (value === "3") {
         console.log("HTTP Get data Russia-2");
      }
      this.setState({ value });
    };

Here your code modified.

Upvotes: 1

Related Questions