manpreet singh manpreet singh - 1 year ago 209
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:') : void 0;

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

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 (
<div className="background">
<div className="container">
<Tab label="Profile" onActive={this.Profile.bind(this)}>
//this is children class

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

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

Aus Aus
Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download