Hey,

I modified your snippet to provide solution of your problem.

The easiest way is to make the separate state for each card, and update it by passing the attribute inside the flipping function.

import React from "react";
import {
  Container,
  Col,
  Row,
  Card,
  CardUp,
  CardBody,
  CardImage,
  CardTitle,
  CardText,
  Avatar,
  FlippingCard,
  Fa,
  Button
} from "mdbreact";

class PortfolioPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      flipped1: false,
      flipped2: false,
      flipped3: false
    };
    this.handleFlipping = this.handleFlipping.bind(this);
  }

  handleFlipping(cardNumber) {
    this.setState({ [`flipped${cardNumber}`]: !this.state[`flipped${cardNumber}`] });
  }

  render() {
    const colStyle = { maxWidth: "22rem" };
    return (
      <Container>
        <h1 className="h1-responsive grey-text font-weight-bold my-5">
          My Portfolio{" "}
        </h1>
        
        <hr className="grey-text" />
        <h3 className="mt-5 grey-text">Websites I Built</h3>
        <Row>
          <Col style={{ minHeight: '26rem' }}>
            <FlippingCard
              flipped={this.state.flipped1}
              className="text-center h-100 w-100"
              style={colStyle}
            >
              <Card className="face front">
                <CardUp>
                  <img
                    className="card-img-top"
                    src="../docs/img/content/site_grip.jpg"
                    alt=""
                  />
                </CardUp>
                <CardBody>
                  <h4 className="font-weight-bold mb-3">The Gripster</h4>
                  <p className="font-weight-bold blue-text">Ecommerce - Magento 1.9</p>
                  <a
                    href="#!"
                    className="rotate-btn"
                    data-card="card-1"
                    onClick={() => this.handleFlipping(1)}
                  >
                    <Fa icon="repeat" /> Click here to rotate
                    </a>
                </CardBody>
              </Card>
              <Card className="face back">
                <CardBody>
                  <h4 className="font-weight-bold">About the Project</h4>
                  <hr />
                  <p>
                    The Gripster is a product that I invented. I've been working
                    on it since 2011. I have customers all over the world who use
                    The Gripster to train climbing strength. Its been a fun Project
                    but now I'm craving to become part of team.
                    </p>
                  <hr />
                  <ul className="list-inline py-2">
                    <li className="list-inline-item">
                      <a href="#!" className="p-2 fa-lg fb-ic">
                        <Fa icon="facebook" />
                      </a>
                    </li>
                    <li className="list-inline-item">
                      <a href="#!" className="p-2 fa-lg tw-ic">
                        <Fa icon="youtube" />
                      </a>
                    </li>
                    <li className="list-inline-item">
                      <a href="#!" className="p-2 fa-lg gplus-ic">
                        <Fa icon="instagram" />
                      </a>
                    </li>
                  </ul>
                  <a
                    href="#!"
                    className="rotate-btn"
                    data-card="card-1"
                    onClick={() => this.handleFlipping(1)}
                  >
                    <Fa icon="undo" /> Click here to rotate back
                    </a>
                </CardBody>
              </Card>
            </FlippingCard>
          </Col>
          <Col style={{ minHeight: '26rem' }}>
            <FlippingCard
              flipped={this.state.flipped2}
              className="text-center h-100 w-100"
              style={colStyle}
            >
              <Card className="face front">
                <CardUp>
                  <img
                    className="card-img-top"
                    src="../docs/img/content/site_it.jpg"
                    alt=""
                  />
                </CardUp>
                <CardBody>
                  <h4 className="font-weight-bold mb-3">Industrial Tracker</h4>
                  <p className="font-weight-bold blue-text">Wordpress</p>
                  <a
                    href="#!"
                    className="rotate-btn"
                    data-card="card-2"
                    onClick={() => this.handleFlipping(2)}
                  >
                    <Fa icon="repeat" /> Click here to rotate
                    </a>
                </CardBody>
              </Card>
              <Card className="face back">
                <CardBody>
                  <h4 className="font-weight-bold">About the Project</h4>
                  <hr />
                  <p>
                    Industrial Tracker is a hobby project that I work on from time to
                    time. I'm passionate about solving problems and when I worked in
                    the Industrial Sector I saw many issues around data tracking. I
                    began designing solutions to some of these issues and will release
                    some apps to service industrial sectors at some point.
                    </p>
                  <hr />
                  <a
                    href="#!"
                    className="rotate-btn"
                    data-card="card-2"
                    onClick={() => this.handleFlipping(2)}
                  >
                    <Fa icon="undo" /> Click here to rotate back
                    </a>
                </CardBody>
              </Card>
            </FlippingCard>
          </Col>
          <Col style={{ minHeight: '26rem' }}>
            <FlippingCard
              flipped={this.state.flipped3}
              className="text-center h-100 w-100"
              style={colStyle}
            >
              <Card className="face front">
                <CardUp>
                  <img
                    className="card-img-top"
                    src="../docs/img/content/site_pi.jpg"
                    alt=""
                  />
                </CardUp>
                <CardBody>
                  <h4 className="font-weight-bold mb-3">Petro Industrial</h4>
                  <p className="font-weight-bold blue-text">Magento - Multisite</p>
                  <a
                    href="#!"
                    className="rotate-btn"
                    data-card="card-2"
                    onClick={() => this.handleFlipping(3)}
                  >
                    <Fa icon="repeat" /> Click here to rotate
                    </a>
                </CardBody>
              </Card>
              <Card className="face back">
                <CardBody>
                  <h4 className="font-weight-bold">About the Project</h4>
                  <hr />
                  <p>
                    Industrial Tracker is a hobby project that I work on from time to
                    time. I'm passionate about solving problems and when I worked in
                    the Industrial Sector I saw many issues around data tracking. I
                    began designing solutions to some of these issues and will release
                    some apps to service industrial sectors at some point.
                    </p>
                  <hr />
                  <a
                    href="#!"
                    className="rotate-btn"
                    data-card="card-2"
                    onClick={() => this.handleFlipping(3)}
                  >
                    <Fa icon="undo" /> Click here to rotate back
                    </a>
                </CardBody>
              </Card>
            </FlippingCard>
          </Col>
        </Row>
      </Container>
    );
  }
}

export default PortfolioPage;