Different states for Tabs Pills having the same component

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.