0

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!

Alin Pandichi
  • 955
  • 5
  • 15
  • Did you export the functions in the separate file and bound it to you component. Have you tried to `console.log()` in the functions? Are they called? Did you do something like this? https://stackoverflow.com/questions/45675191/externalise-common-functions-in-various-react-components/45675589#45675589 – Nocebo Aug 25 '17 at 09:59
  • @Nocebo I did export them, not sure what you mean by "bounding it to my component". The functions do get called, I see logs if I put them there. – Alin Pandichi Aug 25 '17 at 10:12

1 Answers1

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";
Peter Hurst
  • 106
  • 2