Use more than one flipping card on page


Topic: Use more than one flipping card on page

Mike White pro asked 2 years ago

test

I cloned the flipping card and they both work, but they both flip when you flip one.

What code do I need to add to change the set state so they both flip individually?

 

 
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 = { flipped: false };
this.handleFlipping = this.handleFlipping.bind(this);
}

handleFlipping() {
this.setState({ flipped: !this.state.flipped });
}

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.flipped}

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}

>

<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}

>

<Fa icon="undo" /> Click here to rotate back

</a>

</CardBody>

</Card>

</FlippingCard>

</Col>

<Col style={{ minHeight: '26rem' }}>

<FlippingCard

flipped={this.state.flipped}

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}

>

<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}

>

<Fa icon="undo" /> Click here to rotate back

</a>

</CardBody>

</Card>

</FlippingCard>




</Col>

<Col style={{ minHeight: '26rem' }}>

<FlippingCard

flipped={this.state.flipped}

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}

>

<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}

>

<Fa icon="undo" /> Click here to rotate back

</a>

</CardBody>

</Card>

</FlippingCard>




</Col>

</Row>

</Container>

);

}

}

export default PortfolioPage;



here

Jakub Mandra staff premium answered 2 years ago

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;

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: 4.8.4
  • Device: HP Spectre Laptop
  • Browser: Chrome Version 69.0.3497.100
  • OS: Ubuntu 18.10
  • Provided sample code: Yes
  • Provided link: No
Tags