App.jsx is:
<ThemeProvider theme={theme}>
<div>
<Tabs index={0}>
<Tab label='Primary'><small>1Primary content</small></Tab>
<Tab label='Secondary'><small>Sec content</small></Tab>
</Tabs>
<Input label="test"/>
</div>
</ThemeProvider>
Error:
TypeError: Cannot read property 'pointer' of undefined Tabs.render #
line 240 var classNamePointer = (0,
_classnames4.default)(theme.pointer, _defineProperty({}, theme.disableAnimation, disableAnimatedBottomBorder));
Yo should add forceRenderTabPanel={true} to the tabs as such: .
It will keep track of the state across all three tabs and not just the one you are on.
Related
After adding component={Link} in component. My react screen goes completely white, but when I not add Link component then it works fine.
<Tabs textColor="inherit" value={value} onChange={(e,val)=>setValue(val)}>
<Tab component={Link} to="/blogs" label="All Blogs"/>
<Tab label="My Blogs"/>
</Tabs>
and If I don't add Link component, then react page works. what' s the problem here ?
try this:
<Tab component={<Link/>} to="/blogs" label="All Blogs"/>
I am trying to implement react tabs in my Next.js applications. I have installed react tab packages and put the code but unfortunately, it doesn't work.
When I click on title 1 it doesn't move any content 1 same as clicking title2.
But the same code works in a new React application. Below is the code:
const Rtab = () => {
return(
<Tabs>
<TabList>
<Tab>Title 1</Tab>
<Tab>Title 2</Tab>
</TabList>
<TabPanel>
<h2>Any content 1</h2>
</TabPanel>
<TabPanel>
<h2>Any content 2</h2>
</TabPanel>
</Tabs>
);
}
I'm using Next js with material UI, and I have this so far
<Tabs value={value} onChange={handleChange}>
<Link href="/" passHref>
<Tab label="Home"/>
</Link>
...
</Tabs>
The active tab indicator is working without the Link component from Nextjs. But as soon as I enclose my tabs with Link component to handle the routing, the tab indicator refuses to work. No errors are thrown either.
You need to pass the props to the child and give a value to Link.
function LinkTab(props) {
return <Link {...props}>
{React.cloneElement(props.children, {...props})}
</Link>
}
function MyComponent(props) {
let tab = "tab1";
return <Tabs value={tab}>
<LinkTab value="tab1" href="/tab1"><Tab component="a" label="A Tab"/></LinkTab>
</Tabs>
}
Consider the following code snippet of a component:
...
...
function a11yProps(index: any) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
...
...
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
</div>
);
}
I struggle to understand the following component implementation:
<Tab label="Item One" {...a11yProps(0)} />
What does {...a11yProps(0)} mean? Does it mean I pass here properties?
When I look at the API documentation of Tab, I can not find the id and aria-controls properties.
The whole code https://codesandbox.io/s/kz25m
It is a spread operator (... is Javascript spread operator). It basically de-structures / spreads out the value from an array or object.
In your sample code I see your function returns some javascript object. This spread operator pulls out / de-structures all the values from the object and gives each individual values as output
{... a11yProps(0)}
==> This would return -> {...{id: `simple-tab-0`,aria-controls: `simple-tabpanel-0`}}
==> on spreading out the values from the object it would look like
=> {id: `simple-tab-0`,aria-controls: `simple-tabpanel-0`}
Another example with spread operator
let d = {...{"a":1, "b":2, "c":3}}
output: {a: 1, b: 2, c: 3}
Please refer to ES6 website for more on spread operator, destructuring - http://es6-features.org/#SpreadOperator
It's just a function for making a dynamic object and using them as props, to reduce code size.
<Tab label="Item One" id="simple-tab-0" ariaControls="simple-tabpanel-0"/>
About TypeScript and Docs: If you ctrl + click on the Material-UI component, you can see they extends types of component with React.ElementType and inside of this, you can find JSX.IntrinsicElements and each one of HTML element has React.DetailedHTMLProps with props of HTMLAttributes extended with AriaAttributes and DOMAttributes. So naturally, you can pass all of the available attributes for that tag on them!
As mentioned in the title I have tabs component with few links.
tabs:
<AppBar color="default" position="relative">
<Tabs indicatorColor="primary" textColor="primary" value={activeTab} onChange={handleTabChange}>
{tabs.map((tab, i) => ( <Tab label={tab.label} id={`tab-${i}`} key={i} />))}
</Tabs>
</AppBar>
I have this tabs component placed in layout like this
<Container>
<TabsComponent />
{children}
</Container>
Now on each page I wrap my page content with this layout. Forgot to mention that these are nested routes.
Folder structure looks like this:
settings
application.tsx -> contains layout component
profile.tsx -> contains layout component
...
However this solution re-renders my tab component whenever I switch the page. Is there any way I can prevent this.
You can use the custom App file to add your TabsComponent to the whole app, like the following:
// _app.js
function MyApp({ Component, pageProps }) {
return(
<>
**<TabsComponent />**
<Component {...pageProps} />
</>
);
}
export default MyApp