TypeError: Cannot read property 'width' of undefined. about react-responsive-tabs HOT 4 OPEN

@grinyahoo Were you able to find a fix for this? I am also facing the same issue. I am trying to add tabs dynamically. When i add more tabs I get this same issue.

from react-responsive-tabs.

@amarteragundi I've made a patched module:

import Tabs from "react-responsive-tabs";

class PatchedTabs extends Tabs {
    constructor(props) {
        super(props);

        this.setTabsDimensions = () => {
            if (!this.tabsWrapper.current) {
                // it shouldn't happen ever. Just a paranoic check
                return;
            }

            const { tabDimensions } = this.state;

            // initial wrapper width calculation
            const blockWidth = this.tabsWrapper.current.offsetWidth;

            // calculate width and offset for each tab
            let tabsTotalWidth = 0;
            const tabDimensionsNext = {};
            Object.keys(this.tabRefs).forEach((key) => {
                if (this.tabRefs[key]) {
                    const tabKey = key.replace("tab-", "");
                    const width = this.tabRefs[key].tab.offsetWidth;
                    if (typeof width !== "undefined") {
                        tabDimensionsNext[tabKey] = { width, offset: tabsTotalWidth };
                    } else {
                        tabDimensionsNext[tabKey] = tabDimensions[tabKey];
                    }

                    tabsTotalWidth += tabDimensionsNext[tabKey].width;
                }
            });

            this.setState({ tabDimensions: tabDimensionsNext, tabsTotalWidth, blockWidth });
        };
    }
}

export { PatchedTabs as Tabs };

from react-responsive-tabs.

tabs show in two rows after added many dynamic tab ,how can i fixed

from react-responsive-tabs.

@amarteragundi I've made a patched module:

import Tabs from "react-responsive-tabs";

class PatchedTabs extends Tabs {
    constructor(props) {
        super(props);

        this.setTabsDimensions = () => {
            if (!this.tabsWrapper.current) {
                // it shouldn't happen ever. Just a paranoic check
                return;
            }

            const { tabDimensions } = this.state;

            // initial wrapper width calculation
            const blockWidth = this.tabsWrapper.current.offsetWidth;

            // calculate width and offset for each tab
            let tabsTotalWidth = 0;
            const tabDimensionsNext = {};
            Object.keys(this.tabRefs).forEach((key) => {
                if (this.tabRefs[key]) {
                    const tabKey = key.replace("tab-", "");
                    const width = this.tabRefs[key].tab.offsetWidth;
                    if (typeof width !== "undefined") {
                        tabDimensionsNext[tabKey] = { width, offset: tabsTotalWidth };
                    } else {
                        tabDimensionsNext[tabKey] = tabDimensions[tabKey];
                    }

                    tabsTotalWidth += tabDimensionsNext[tabKey].width;
                }
            });

            this.setState({ tabDimensions: tabDimensionsNext, tabsTotalWidth, blockWidth });
        };
    }
}

export { PatchedTabs as Tabs };

This does not work in TypeScript

from react-responsive-tabs.