Topic: Different states for Tabs Pills having the same component
Philippe Yu free asked 5 years ago
Hi there,
I don't know how to render different datas with a same component, using Tab and Pills. What properties to use ? Thanks !
state = {
activeItemPills: "1"
}
togglePills = tab => e => {
if (this.state.activePills !== tab) {
this.setState({
activeItemPills: tab
});
}
}
render () {
return (
<MDBContainer>
<MDBNav pills color="red" className="nav-justified ">
<MDBNavItem>
<MDBNavLink
to="#1"
className={this.state.activeItemPills === "1" ? "active" : ""}
onClick={this.togglePills("1")}
>
Cuve 1
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
to="#2"
className={this.state.activeItemPills === "2" ? "active" : ""}
onClick={this.togglePills("2")}
key="1"
>
Cuve 2
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
to="#3"
className={this.state.activeItemPills === "3" ? "active" : ""}
onClick={this.togglePills("3")}
>
Cuve 3
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
to="#"
className={this.state.activeItemPills === "4" ? "active" : ""}
onClick={this.togglePills("4")}
>
Cuve 4
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
to="#"
className={this.state.activeItemPills === "5" ? "active" : ""}
onClick={this.togglePills("5")}
>
Cuve 5
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
to="#"
className={this.state.activeItemPills === "6" ? "active" : ""}
onClick={this.togglePills("6")}
>
Cuve 6
</MDBNavLink>
</MDBNavItem>
</MDBNav>
{/* Add here the contents inside tabs */}
<MDBTabContent activeItem={this.state.activeItemPills}>
<MDBTabPane tabId="1">
<FicheGlobale />
</MDBTabPane>
<MDBTabPane tabId="2">
<FicheGlobale key="2" />
</MDBTabPane>
<MDBTabPane tabId="3">
<FicheGlobale />
</MDBTabPane>
<MDBTabPane tabId="4">
<FicheGlobale />
</MDBTabPane>
<MDBTabPane tabId="5">
<FicheGlobale />
</MDBTabPane>
<MDBTabPane tabId="6">
<FicheGlobale />
</MDBTabPane>
</MDBTabContent>
</MDBContainer>
);
}
Aliaksandr Andrasiuk staff answered 5 years ago
Hi,
You can store an object with fields types in your state :
state = {
items: {
pills: "1",
tabs: "1"
}
};
Then modify togglePills
method :
togglePills = (type, tab) => e => {
const items = { ...this.state.items };
if (items[type] !== tab) {
items[type] = tab;
this.setState({
items
});
}
};
And then modify your components properties:
<MDBNavLink
to="#1"
className={this.state.items.pills === "1" ? "active" : ""}
onClick={this.togglePills("pills", "1")}
>
Here is the full code :
import React from "react";
import {
MDBContainer,
MDBNav,
MDBNavItem,
MDBNavLink,
MDBTabContent,
MDBTabPane,
} from "mdbreact";
export default class App extends React.Component {
state = {
items: {
pills: "1",
tabs: "1"
}
};
togglePills = (type, tab) => e => {
const items = { ...this.state.items };
if (items[type] !== tab) {
items[type] = tab;
this.setState({
items
});
}
};
render() {
return (
<MDBContainer>
<MDBNav pills color="red" className="nav-justified ">
<MDBNavItem>
<MDBNavLink
to="#1"
className={this.state.items.pills === "1" ? "active" : ""}
onClick={this.togglePills("pills", "1")}
>
Cuve 1
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
to="#2"
className={this.state.items.pills === "2" ? "active" : ""}
onClick={this.togglePills("pills", "2")}
key="1"
>
Cuve 2
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
to="#3"
className={this.state.items.pills === "3" ? "active" : ""}
onClick={this.togglePills("pills", "3")}
>
Cuve 3
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
to="#"
className={this.state.items.pills === "4" ? "active" : ""}
onClick={this.togglePills("pills", "4")}
>
Cuve 4
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
to="#"
className={this.state.items.pills === "5" ? "active" : ""}
onClick={this.togglePills("pills", "5")}
>
Cuve 5
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
to="#"
className={this.state.items.pills === "6" ? "active" : ""}
onClick={this.togglePills("pills", "6")}
>
Cuve 6
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBNav tabs className="nav-justified">
<MDBNavItem>
<MDBNavLink
to="#"
className={this.state.items.tabs === "1" ? "active" : ""}
onClick={this.togglePills("tabs", "1")}
role="tab"
>
Home
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
to="#"
className={this.state.items.tabs === "2" ? "active" : ""}
onClick={this.togglePills("tabs", "2")}
role="tab"
>
Follow
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
to="#"
className={this.state.items.tabs === "3" ? "active" : ""}
onClick={this.togglePills("tabs", "3")}
role="tab"
>
Contact
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBTabContent className="card" activeItem={this.state.items.tabs}>
<MDBTabPane tabId="1" role="tabpanel">
<p className="mt-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil
odit magnam minima, soluta doloribus reiciendis molestiae placeat
unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat
ratione porro voluptate odit minima.
</p>
</MDBTabPane>
<MDBTabPane tabId="2" role="tabpanel">
<p className="mt-2">
Quisquam aperiam, pariatur. Tempora, placeat ratione porro
voluptate odit minima. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
</p>
<p>
Quisquam aperiam, pariatur. Tempora, placeat ratione porro
voluptate odit minima. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
</p>
</MDBTabPane>
<MDBTabPane tabId="3" role="tabpanel">
<p className="mt-2">
Quisquam aperiam, pariatur. Tempora, placeat ratione porro
voluptate odit minima. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
</p>
</MDBTabPane>
</MDBTabContent>
</MDBContainer>
);
}
}
Best regards.
Philippe Yu free commented 5 years ago
This is great, thanks for the help !
Aliaksandr Andrasiuk staff commented 5 years ago
Glad I could help!
Happy coding! :)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.13.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No