Is lazy loading possible? about react-dropdown-tree-select HOT 3 CLOSED

Its not something the component supports natively but its doable with an HOC (Higer Order Component).

It'd be something like:

class HOC extends Component {
  ...
  onNodeToggle = ({id, expanded}) => {  // assumes that initial data has an unique id property for each node
    if(!expanded) {  // you can do more like check if data is already fetched then skip this
      // fetch remote data
      this.setState({ data: merge(data, remoteChildNodeData) }) 
    }
  }

  render() {
    const { data } = this.state
    return (
      <DropdownTreeSelect data={data} onNodeToggle={onNodeToggle} />
    )
  }
}

I understand this may not be perfect but its a start. If you want the component to support this natively, then we need a bigger discussion.

from react-dropdown-tree-select.

@mrchief thanks. This seems like a viable option :)

from react-dropdown-tree-select.

Its not something the component supports natively but its doable with an HOC (Higer Order Component).

It'd be something like:

class HOC extends Component {
  ...
  onNodeToggle = ({id, expanded}) => {  // assumes that initial data has an unique id property for each node
    if(!expanded) {  // you can do more like check if data is already fetched then skip this
      // fetch remote data
      this.setState({ data: merge(data, remoteChildNodeData) }) 
    }
  }

  render() {
    const { data } = this.state
    return (
      <DropdownTreeSelect data={data} onNodeToggle={onNodeToggle} />
    )
  }
}

I understand this may not be perfect but its a start. If you want the component to support this natively, then we need a bigger discussion.

once the state is updated the dropdown will be refreshed and all nodes will collapse.

from react-dropdown-tree-select.