Error when closing only existing tab.

[EspressoBeans]

Thanks for this simple component.

I was able to get it working on my project only after I added activeIndex to my state and default it to 0: activeIndex: 0;. I also had to bind the addTab function to this: this.addTab = this.addTab.bind(this);. These are not included in your code example and it won't work for me otherwise.

However, I run into errors when I close the only remaining tab. I get the same error if I don't initialize the tab state with at least one tab to display. These are the same issue, where <CloseableTabs/> is not able to accept an empty array of tabs within data. For my React page containing a tabs component, there may be 0 to many tabs.

In order to keep parent component from dying with the error, I am handling the component display as follows where it is conditionally displayed depending on tabs array length:

...
          <div>
            {this.state.tabs.length > 0 && (
              <CloseableTabs
                tabPanelColor="lightgray"
                data={this.state.tabs}
                onCloseTab={(id, newIndex) => {
                  this.setState({
                    tabs: this.state.tabs.filter(item => item.id !== id),
                    activeIndex: newIndex
                  });
                }}
                activeIndex={this.state.activeIndex}
              />
            )}
          </div>
...

This will hide the CloseableTabs component when there are no tabs to display and not bring down my app, but the error shows in the console log.

Do you have a current code example of how you handle this scenario?

[themre]

Hi,
Glad it helps you, it was my first lib to give out :) It could be that if you wanted to clear all the data,render is without anything to render an thus breaks. So we should check if there is no data to render, we will return null. Can you check if this is the case? Or if you can provide the error that throws. Perhaps the easiest way is to create codesandbox demo so we can iterate on it.

[EspressoBeans]

I'll try to create a codesandbox soon for you to see the error. But here is a screenshot of the consolelog error.

Basically, since the data prop is passed an empty array, the CloseableTabs component tries to iterate through the empty array and the Cannot read property of 'id' of ... undefined error is thrown.

[themre]

hey, sorry i managed to take a look just now. so i see this bug, yes. this is due to last PRs because someone wanted caching for the data and apparently it has bugs. i will try to take a look soon, but for now you can use 1.1.2 version which works ok. you can take a look here:
https://codesandbox.io/s/infallible-goldwasser-birrp