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!
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";