manpreet singh manpreet singh - 1 month ago 20
React JSX Question

React material UI WARNING Tabs only accepts Tab Components as children

i am using material UI tabs .
but for some reason i am getting

warning :Tabs only accepts Tab Components as children.

Found function (props, context, updater) {
// This constructor gets overridden by mocks. The argument is used
// by mocks to assert on what gets mounted.

if (process.env.NODE_ENV !== 'production') {
process.env.NODE_ENV !== 'production' ? warning(this instanceof Constructor, 'Something is calling a React component directly. Use a factory or ' + 'JSX instead. See: fb.me/react-legacyfactory') : void 0;


// Wire up auto-binding
if (this.__reactAutoBindPairs.length) {
bindAutoBindMethods(this);
}

this.props = props;
this.context = context;
this.refs = emptyObject;
this.updater = updater || ReactNoopUpdateQueue;

this.state = null;


This warning I am facing

My code looks like this

return (
<MuiThemeProvider>
<div className="background">
<Header/>
<div className="container">
<Tabs>
<Tab label="Profile" onActive={this.Profile.bind(this)}>
<div>
<Profile/>
//this is children class
</div>
</Tab>

<Tab label="Downloads" >
<div>
{
data.map((detail)=> {
return <DataContainer item={detail}
ViewItem = {this.productData.bind(this)}
/>
})
}

</div>
</Tab>
<Link to="ItemPreview"> <Tab label="Content">
</Tab></Link>
</Tabs>
</div>
<Sidebar productname={productspecificdata}/>
</div>
</MuiThemeProvider>

Aus Aus
Answer

You need to remove the Link tag from this Tab

<Link to="ItemPreview"> <Tab label="Content"></Tab></Link>

As the warning says, you cannot have a Link tag directly under Tabs. Try adding the link inside the Tab if you want.

Many Material-Ui components have this behaviour/constraint, I remember Table has that as well.