How to set page shown dynamically in Drilldown

[theotherdy]

Question

I am using the Drilldown to allow users to dig into hierarchical information. Each Drilldown.Option loads new information which can itself contain a link to related information, which maps to a Drilldown.Page. When users click this link, I want to update the Drilldown component to show the Drilldown.Page associated with it. I see that there is a goToPage public function which could potentially be used to achieve this but cannot fathom how I can get a reference to the Drilldown component, from the parent element, on which I can call this method. I had hoped that the drilldownRef property might do this, but this appears to just be a ref to the HTML element:

<div ... data-cid="Drilldown">

Any advice on how to set page shown from the component's parent would be very gratefully received! My parent component is functional in case that makes any difference?

I guess the reason this is so difficult is that React would expect pageNo to be an attribute of the Drilldown component, which could then be set in the normal way, rather than by calling a public method?

[ke1k0]

Hi @theotherdy!

If you want to get a reference to the component, you can do it with React's built-in ref prop, eg.:

<Drilldown
  rootPageId='Root Page'
  ref={ (drilldown) => { console.log(drilldown) } } // returns with the instance
>
  ...
</Drilldown>

There are also other options that might be useful for you that are listed/showcased in the Page navigation and the Editable structures examples on the Drilldown docs page (e.g. the Option's onOptionClick prop exposes navigation features too).

If you need any more help or clarification, please let me know :)

[theotherdy]

Thanks @ke1k0 for this speedy and very helpful response - that now works a treat! I had a feeling that it was me not understanding React properly - this ref business seems particularly confusing for a noob - so thanks for taking the time to explain. Loving the Drilldown component BTW - feels much more comfortable than the TreeBrowser that I was using previously.

[ke1k0]

Awesome, I'm really glad to hear that! It was indeed our intention to make Drilldown an easy(ier)-to-use and responsive alternative to TreeBrowser and Menu. Since it is a fairly new component, we'd be glad to hear any feedback on any difficulties you've encountered using it, so we can improve the component and its documentation :)

[matyasf]

Since this issue did not receive any activity since a month I'll close it.