import { useState } from 'react';
import ReactCardFlip from 'react-card-flip';
const Card = () => {
const [isFlipped, setIsFlipped] = useState(false)
function handleClick(e) {
e.preventDefault();
setIsFlipped(!isFlipped);
}
return (
<>
<YOUR_FRONT_CCOMPONENT>
This is the front of the card.
Click to flip
</YOUR_FRONT_CCOMPONENT>
<YOUR_BACK_COMPONENT>
This is the back of the card.
<button onClick={handleClick}>Click to flip</button>
</YOUR_BACK_COMPONENT>
</ReactCardFlip>
</>
)
}
export default Card;
import { useState } from 'react';
import ReactCardFlip from 'react-card-flip';
const Card = () => {
const [isFlipped, setIsFlipped] = useState(false)
function handleClick(e) {
e.preventDefault();
setIsFlipped(!isFlipped);
}
return (
<>
<YOUR_FRONT_CCOMPONENT>
This is the front of the card.
Click to flip
</YOUR_FRONT_CCOMPONENT>
)
}
export default Card;