Conditionally showing tabs after first render

[dan-fein]

Hi been a bit active on this repo today, hoping this is my last question (and thanks for the support so far).

I'm trying to conditionally set my ref map but it doesn't seem to like updates. Basically I'm trying to load pages that may or may not have content for the various pages, and if there's no content I don't want to show them.

Here's where I'm starting:

let refs = {
                    Posts: postsTabRef,
                    Details: detailsTabRef,
                    Items: itemsTabRef,
                    Similar: similarTabRef 
                }

Simple example of what I was trying/would like to achieve:

let refs = {}
    refs['Posts'] = postsTabRef
    if (details.length > 0){
      refs['Details'] = detailsTabRef
    }
    if (items.length > 0){
      refs['Items'] = itemsTabRef
    }
    if (similar.length > 0){
      refs['Similar'] = similarTabRef
    }
    const [refMap, setRefMap] = React.useState(refs)

With this, was trying to check after an API call returns, could I update refMap and should I somehow ask it to refresh without re-rendering the children components?

I can currently update refs and it will render the right tabs, but when clicking them I'm currently getting scrollToIndex out of range, which just makes me think it renders first with some number of expected tabs, and then re-renders to show the tabs but on-click it doesn't recognize that tab actually belongs.

Any thoughts would be great!

[PedroBern]

@danielfein you are right, it does not like updates 😝 It will probably maybe be possible with #93.