Topic: Where can I find the FlippingCard component\'s methods/functions?

pcdavis pro asked 5 years ago

I am able to display the FlippingCard component, but I was hoping MDB might also provide the method/function used to switch from front face to back face and the animation that flips the card. Can that be found anywhere in the documentation? Below is my code for a component called FlippingCardExample:
import React, { Component } from 'react';

import { FlippingCard, Card, CardUp, Avatar, CardBody, Fa } from 'mdbreact';

class FlippingCardExample extends Component {

constructor(props) {


this.state= {




render() {

return (

<FlippingCardflipped={this.state.flipped}className="text-center h-100 w-100"style={{ maxWidth:'22rem' }}>

<CardclassName="face front">


<imgclassName="card-img-top"src=""alt="a photo of a house facade"/>


<AvatarclassName="mx-auto white"circle>




<h4className="font-weight-bold mb-3">Marie Johnson</h4>

<pclassName="font-weight-bold blue-text">Web developer</p>

<aclassName="rotate-btn"data-card="card-1"onClick={this.handleFlipping}><Faicon="repeat"/> Click here to rotate</a>



<CardclassName="face back">


<h4className="font-weight-bold">About me</h4>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?



<ulclassName="list-inline py-2">

<liclassName="list-inline-item"><aclassName="p-2 fa-lg fb-ic"><Faicon="facebook"/></a></li>

<liclassName="list-inline-item"><aclassName="p-2 fa-lg tw-ic"><Faicon="twitter"/></a></li>

<liclassName="list-inline-item"><aclassName="p-2 fa-lg gplus-ic"><Faicon="google-plus"/></a></li>

<liclassName="list-inline-item"><aclassName="p-2 fa-lg li-ic"><Faicon="linkedin"/></a></li>


<aclassName="rotate-btn"data-card="card-1"onClick={this.handleFlipping}><Faicon="undo"/> Click here to rotate back</a>







export default FlippingCardExample;

Jakub Mandra staff answered 5 years ago

Just add this function:
handleFlipping = () => this.setState({ flipped: !this.state.flipped });

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: windows
  • Browser: chrome
  • OS: 10
  • Provided sample code: No
  • Provided link: No