Different states for Tabs Pills having the same component


Topic: Different states for Tabs Pills having the same component

Philippe Yu asked 3 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 3 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 commented 3 years ago

This is great, thanks for the help !


Aliaksandr Andrasiuk staff commented 3 years ago

Glad I could help!

Happy coding! :)


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: 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