TypeError: Cannot read property 'width' of undefined.

[grinyahoo]

Cast to Boolean in https://github.com/maslianok/react-responsive-tabs/blob/master/src/index.js#L147 leads to error above when width is 0 and there are no tabs shown. Check for undefined instead.

v4.3.0...v4.4.2#diff-bfe9874d239014961b1ae4e89875a6155667db834a410aaaa2ebe3cf89820556R147

[amarteragundi]

@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.

[grinyahoo]

@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 };

[saratoprak]

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

[TechStudent10]

@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

[makis-x]

@TechStudent10 I just saw this but you should just build your won. It only takes about an hour. Less bloat and you are not dependent on people who are really busy with their own work already.