React-toolbox Tabs don't get rendered when code is imported from another file

Question

I am using react-toolbox Tabs and they don't get rendered if I extract them into a separate file, but they render if the code is extracted in the same file. I cannot figure out the reason why that happens. For example:

function programDayTab({id, name, startTime}) {
    return (
        <Tab key={id} label={name}>
            <small>Start date: {new Date(startTime).toDateString()}</small>
            <small>Start time: {new Date(startTime).toTimeString()}</small>
        </Tab>
    );
}

function programDayTabs(days) {
    return days ? days.map(day => programDayTab(day)) : "";
}
....
    render() {
        const days = this.props.days;
        return (
            <Tabs index={this.state.selectedTabIndex} onChange={this.handleTabChange} fixed theme={theme}>
                {programDayTabs(days)}
            </Tabs>
        );
    }

If the two functions stay in the same file, everything works just fine. If I extract them in a separate JS file and import them into the React component file, then the tabs won't render, and I see no errors in the console. Any ideas why that might happen? Thanks!

Answer 1

We worked out on Discord, the problem was (not shown in the original question):

import { Tab } from "react-toolbox/lib/tabs/Tab";

Instead of either of these correct forms:

import { Tab } from "react-toolbox";

or

import Tab from "react-toolbox/lib/tabs/Tab";